Search code examples
javascriptangularjsselectng-options

key-value pairs in ng-options


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

  • 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",
        ...
    };