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.

You mean you want ex. 4 options including blank option and once you select option then it should remove, right? — Nikita
– Nikita, Commented Dec 18, 2017 at 6:15
don't use ng-repeat to create select options. This is the entire purpose that ng-options was created for. — Claies
– Claies, Commented Dec 19, 2017 at 0:06

gaurav bankoti · Accepted Answer · 2017-12-18 07:27:31Z

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, 2017 at 7:27

gaurav bankoti

2241 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shimukawa Over a year ago

no this is not the case, i have an object with choices in it that is dynamically created by admin.

shimukawa · Accepted Answer · 2017-12-19 09:02:39Z

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.

Collectives™ on Stack Overflow

Remove Blank option on Angular on dynamic option objects

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related