CODEWITHSUNDEEP
htmlangularjsselect
adam.k
adam.k

Reputation: 632

Angular 1.5 <select> all options are being set to selected="selected"

This example straight out of the Angular Docs https://docs.angularjs.org/api/ng/directive/select

  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

Link to plunker: https://plnkr.co/edit/ikFrsLnbR5yFymKk

If you open up the debugger in the plunker, and modify your selection all <option> tags will end up with selected="selected". Why is this happening? How can this be fixed? Picture of dev tools showing selected="selected"

I've found no good answer (or any reference) to this in the Docs or online. Any help would be greatly appreaciated

EDIT: correct plunker link

Upvotes: 1

Views: 97

Answers (1)

adam.k
adam.k

Reputation: 632

I haven't found a specific answer in the docs as to how this is handled. I do however think I understand why it's happening.

ng-model is the model for our selection. Therefore when we update our selection, the ng-model also updates. Having the tag selected="selected" is added because of some internal working of Angular (my guess at least). Overall this is not a big issue as the selected attribute is only used as the default when loading the page, which will be based off of the ng-model. Therefore there is no inherent problem with the above "issue" happening in an application

Upvotes: 1

Related Questions