CODEWITHSUNDEEP
javascripthtmlangularjsselectangularjs-ng-options
mr.simonski
mr.simonski

Reputation: 382

Angular.js: HTML select element with ng-options of object-properties

I'm building my first AngularJS app and I really like the concepts I saw so far.

Right now I have the following data structur I would like to bring into the view as a select HTML element:

var objs = {
  "A1": 12234,
  "A2": 2354,
  "A3": 2323434
}

I tried to bind the data structure objs to a select drop down as follows:

<select ng-model="finallySelectedEntry" ng-options="id as name for (name , id) in objs">
     <option>--</option>
</select>

This results in:

<option value="A1" selected="selected">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>

..but I expect:

<option value="12234" selected="selected">A1</option>
<option value="2354">A2</option>
<option value="2323434">A3</option>

Switching to

<select ng-model="finallySelectedEntry" ng-options="name as id for (name , id) in objs">

doesn't work..

Does anyone has an idea what my fault is? I try to avoid to do it with ng-repeat..

Upvotes: 1

Views: 1536

Answers (1)

PSL
PSL

Reputation: 123739

It really does not matter what property is used as value of the select since the select is anyways managed as a data model using angular, however you would need to use track by (track by id) to do so:-

Try:-

 <select ng-model="finallySelectedEntry" 
    ng-options="id as name for (name , id) in objs track by id">

Demo

Important Note:

In the demo i am using angular 1.3.x, there is a bug while using track by along with select as syntax in angular 1.2.x, i will not make the selection of the select properly. So if you are using 1.2.x version of angular get rid of the select as syntax and bind the model appropriately, also you may want to change the data model to bind it as array of object, instead of an object as is.

Upvotes: 2

Related Questions