AngularJS - Using $index in ng-options

Question

AngularJS - Using $index in ng-options

If I bind an array to a SELECT tag using the following:

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

The OPTION tags get the expected incrementing index values (0, 1, 2, ...). However, when I select something from the dropdown, the value of selData is getting bound to undefined. Should the binding actually work?

On the other hand, if I do the following:

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

The OPTION tags get the same index, but the entire object is bound on change. I don't know if Angular is meant to support this, or if it's simply a nice bug/side effect.

angularjs

Answer 1

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

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

In the template:

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

In the end, model.choice will have the value 0, 1, or 2. When it's 0, you will see 'One'; 1 will display 'Two', etc. But in the model, you will see the index value only.

I adapted this information from "Mastering Web Application Development with AngularJS" by PACKT Publishing, and verified at the Angular reference documentation for select.

Answer 2

Since you can't 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;
}

Demo Fiddle

Comment:

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

Answer 3

$index is defined for ng-repeat, not select. I think this explains the undefined. (So, no, this shouldn't work.)

Angular supports binding on the entire object. The documentation could be worded better to indicate this, but it does hint at it: "ngOptions ... should be used instead of ngRepeat when you want the select model to be bound to a non-string value."