Using $ index with AngularJS 'ng-options' directive?

Question

Let's say that I attach an array to a select tag using the following:

 <select ng-model="selData" ng-options="$index as d.name for d in data"> 

In this case, the corresponding option tags are assigned a sequence of index values: (0, 1, 2, ...). However, when I select something from the selData , the selData value selData bound to undefined . Should binding really work?

On the other hand, let's say that I do the following instead:

 <select ng-model="selData" ng-options="d as d.name for d in data"> 

Here, the option tags get the same index, but the whole object is tied to the change. Does this work by design, or is this behavior just a good mistake or a side effect of AngularJS?

Answer 1

$ index is defined for ng-repeat, not select. I think this explains undefined . (So ​​no, this should not work.)

Angular supports binding to the entire object. It might be better to indicate this in the documentation, but he hints at this: "ngOptions ... should be used instead of ngRepeat when you want the selection model to be bound to a non-string value."

Answer 2

Because arrays are very similar to objects in JavaScript, you can use the syntax for "object data sources". The trick is in brackets in the ng-options :

 var choices = [ 'One', 'Two', 'Three' ]; 

In the template:

 <select ng-model="model.choice" ng-options="idx as choice for (idx, choice) in choices"> </select> 

At the end, model.choice will have a value of 0, 1, or 2. When it is 0, you will see One ; 1 will display Two , etc. But in the model you will see only the index value.

I adapted this information from the “Mastering Web Application Development Using AngularJS” section of PACKT Publishing and confirmed in the reference documentation for the corner query for selection .

Answer 3

Since you cannot use $index , but you can try indexOf .

HTML

 <div ng-app ng-controller="MyCtrl"> <select ng-model="selectedItem" ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select> selectedItem: {{selectedItem}} </div> 

controller

 function MyCtrl($scope) { $scope.values = ["Value1","Value2"]; $scope.selectedItem = 0; } 

Fiddle Demo

Comment:

Array.prototype.indexOf not supported in IE7 (8)

Answer 4

You can also use ng-value = '$ index' in the <option> .

 <select ng-model="selData"> <option ng-repeat="d in data track by $index" ng-value="$index"> {{d.name}} </option> </select> 

Answer 5

Do not use $index inside select tags. Use $index inside parameter tags if you want to use array indexes as values ​​or parameters.

 <option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option> 

If you want to use internal values, just put it in the value attribute as a required expression, for example

 <option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option> 

and my controller code will look like this:

 var users = ['username':'bairavan', 'username':'testuser'];