78

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.

davioooh
  • 23,742
  • 39
  • 159
  • 250

3 Answers3

169

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",
    ...
};
Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
  • 32
    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. – Markus Hay Oct 02 '14 at 12:41
  • Is it possible to reserve the order? I get options in random order this way. – led Feb 01 '15 at 05:15
  • You should use array for order. JavaScript object iteration will be random order for some performance concern. – Chen-Tsu Lin Feb 01 '15 at 05:25
  • 10
    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](https://docs.angularjs.org/guide/expression#one-time-binding) syntax: `` – Alex Ross Sep 01 '15 at 21:14
  • 2
    Thanks, much clearer than the official doc for `ngOption`. – Petr Peller Dec 15 '15 at 09:09
  • 1
    **use ng-option:** I saw many solution for `ng-options` based on `object` but this is the **best**. – Mosh Feu Dec 28 '15 at 15:17
  • 2
    very nice, but not able to set default selected item using 'ng-options' – Rahul Matte Feb 23 '16 at 08:24
  • ng-options only seems to work when the ng-model attribute is set on the select element, hopefully this saves someone else my headaches. – Fasermaler Apr 10 '16 at 09:39
  • @Chen-TsuLin I need help Please view ones this [Question](http://stackoverflow.com/q/41223958/2143446) – Neotrixs Dec 20 '16 at 07:31
21

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/

Markus Hay
  • 990
  • 1
  • 10
  • 13
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

Community
  • 1
  • 1
Janusz01
  • 507
  • 2
  • 4
  • 12