Can a <select> be bound to an array by index in Angular.js?
angularjs, arrays
Solution
Try the following:
<select ng-model="index" ng-options="i as name for (i, name) in items">
If you check the ng-options documentation, you'll see one of the supported forms is
select as label for value in array
- select is what the value of the model should be when that item is selected
- label is the text to display
We've combined that with the `(key, value)` grouping, which you can use to get access to the key in the object (or in this case, index in the array).
Edit: I'm seeing the same issue you're seeing. A comment on the angular docs recommends this approach instead:
<select ng-model="index" ng-options="items.indexOf(item) as item for item in items">
Which IMO is not quite as clean, but seems to work.
Problem
Say I have this: ``` $scope.items = ["foo", "bar", "baz"]; $scope.index = 1; ``` How do I bind that to a `<select>`? I tried: `<select ng-model="index" ng-options="i for i in items">` but then a blank option is selected at load time. This: `<select ng-model="items[index]" ng-options="i for i in items">` seems to work initially but when changing the selection, the value at items[index] is changed, which is obviously not what we want. My workaround is to map the array to {num, title} pairs but that logic clutters up the controller.