How to avoid empty automatic option in an angularjs select?

Question

<form ng-show="editingUser" class="form-inline editingUser" role="form" name="gebruikerdetailform" novalidate>
<input type="text" class="form-control" ng-model="userDetail.name" placeholder="Naam" ng-required="true"/>
<input type="text" class="form-control" ng-model="userDetail.surname" placeholder="Surname"/>
<select class="form-control" ng-model="userDetail.role">
    <option ng-selected="userDetail.role === 'user' || userDetail.role === ''" >user</option>
    <option ng-selected="userDetail.role === 'admin'">admin</option>
</select>
</form>

in this code, automatically the empty option <option value="? string: ?"></option> is created by angularjs. i know it happens when a value referenced by ng-model doesn't exist in a the ng-options. but this is not the case, and i don't understand how to avoid this behavior, and where does it come from. any ideas?

How to write a good title - meta.stackexchange.com/questions/10647/… — Liath
– Liath, Commented Jun 17, 2014 at 7:59
thanks, adding always a value to the userDetail.role solved the problem. — axel
– axel, Commented Jun 17, 2014 at 8:53

Wilk · Accepted Answer · 2014-06-17 09:24:17Z

2

If the problem concerns the initialization of the ng-model, you can use the directive ng-init, as follows:

<form ng-show="editingUser" class="form-inline editingUser" role="form" name="gebruikerdetailform" novalidate>
  <input type="text" class="form-control" ng-model="userDetail.name" placeholder="Naam" ng-required="true"/>
  <input type="text" class="form-control" ng-model="userDetail.surname" placeholder="Surname"/>
  <select class="form-control" ng-model="userDetail.role" ng-init="user">
    <option ng-selected="userDetail.role === 'user' || userDetail.role === ''" >user</option>
    <option ng-selected="userDetail.role === 'admin'">admin</option>
  </select>
</form>

Look at the usage of the ng-init directive in the select definition.

For more info: https://docs.angularjs.org/api/ng/directive/ngInit

Cheers

answered Jun 17, 2014 at 9:24

Wilk

8,18310 gold badges48 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

How to avoid empty automatic option in an angularjs select?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related