key-value pairs in ng-options

Question

I need to use an associative array as data source for my select options using AngularJS.

Is it possible to use an array like this?

{
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
}

and get something like this:

<select>
    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>
    ...
</select>

I read docs, but I can't understand how to achieve this.

Solution 1

use ng-option:

<select ng-model="blah" ng-options="key as value for (key , value) in data"></select>

or use ng-repeat:

<select>
    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>
</select>

data in controller:

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};

Solution 2

The following article discusses the variety of ways that you can use ngOptions (by far the clearest, most thorough explanation I've ever seen): http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

Solution 3

Answer by Chen-Tsu Lin actually gives both ways of accessing objects. Just want to add few more lines -

Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.

Adding an example for the reference:

ng-repeat : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected

ng-options: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_object

For complete reference, head onto http://www.w3schools.com/angular/angular_select.asp

Comments

[Markus Hay]

I would highly recommend avoiding the ng-repeat method as it adds 2 new watches for each key/value pair. So basically if your select contains 50 items, you just created 100 new watchers. Yikes.

[led]

Is it possible to reserve the order? I get options in random order this way.

[Chen-Tsu Lin]

You should use array for order. JavaScript object iteration will be random order for some performance concern.

[whyAto8]

Thanks man, have to say that the link is the best till date. :-)

[Alex Ross]

If you need to use ng-repeat and your keys/values don't change, I think you can avoid the 2 new watches @MarkusHay mentioned by using the new one-time binding syntax: <option ng-repeat="(key, value) in data" value="{{::key}}">{{::value}}</option>

[Petr Peller]

Thanks, much clearer than the official doc for ngOption.

[Mosh Feu]

use ng-option: I saw many solution for ng-options based on object but this is the best.

[Rahul Matte]

very nice, but not able to set default selected item using 'ng-options'

[Fasermaler]

ng-options only seems to work when the ng-model attribute is set on the select element, hopefully this saves someone else my headaches.

[Neotrixs]

@Chen-TsuLin I need help Please view ones this Question