Remove Blank option on Angular on dynamic option objects

Question

I have this code

<select ng-model='item.data.choice' >
  <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices' value="{{choice.name}}" ng-disabled="$parent.controllerAction == 'show'">{{choice.name}}</option>
</select>

It shows the 3 choices entered by the Admin of the system in a dropdown box. It shows it without the blank choice.

The problem is if I want to put a default value (for example, choice[0]), it adds a blank value.

Also when converting from ng-repeat to ng-options from this question.

I have 4 choices 1,2,3 and blank i wanted to remove the blank i followed the guide/answers found on the link i have posted with my question, the difference in my part is that i have a dynamic list and when the list is newly created. it never fails to include the blank when using ng-option but it solves my problem to have an initial default value from the dynamic list, if i use ng-repeat i dont have the initial value but the blank from the choices where remove. i wanted to have the blank choice remove and the same time to have an initial value from the dynamic list.

I can set the default value but it cannot remove the blank option.

Can anyone help? Thanks.

https://stackoverflow.com/questions/20738953/angular-js-remove-blank-option-from-select-option — Edison Augusthy, Dec 18 '17 at 03:51
You mean you want ex. 4 options including blank option and once you select option then it should remove, right? — Nikita, Dec 18 '17 at 06:15
don't use `ng-repeat` to create select options. This is the entire purpose that `ng-options` was created for. — Claies, Dec 19 '17 at 00:06
also, how are you setting your default value? your value in this case is `choice.name`, so `choice[0]` wouldn't even be the same property..... — Claies, Dec 19 '17 at 00:09
yes that is correct i am wondering how will i use it to show no blanks becaues the initial value of it is blank that is why it is showing a blank record on first time — shimukawa, Dec 19 '17 at 05:36

score 0 · Answer 1 · answered Dec 18 '17 at 07:27

0

You have to filter data in js file and create a new array that you will render it in html.let say you are getting data in variable **item.data.simple_choices**(as you have written it in ng-repeat)then your function would be.

var data = item.data.simple_choices;
var filteredArray = [];
data.filter(function(item){
  if(item.name!=''){
filteredArray.push(item)
}
})

answered Dec 18 '17 at 07:27

gaurav bankoti

224
1
8

no this is not the case, i have an object with choices in it that is dynamically created by admin. – shimukawa Dec 19 '17 at 08:54

score 0 · Answer 2 · answered Dec 19 '17 at 09:02

After hours of leeching the web and lots of trial and error I finally got the correct answer.

<select ng-model='model'>
        <!-- correct binding -->
          <option ng-show='choice.name'  ng-repeat='choice in object' value="{{choice.name}}" ng-selected='model = object[0].name'>{{choice.name}}</option>
      </select>

The code is simple but this format is helpful because object is an object the has the value of the list. as you can see i did assign it to the model because model is the variable that is being used in the view. The [0] is the index number of the list. You can use value or name depending on what parameters are present on the object.

Remove Blank option on Angular on dynamic option objects

2 Answers2