Пары ключ-значение в ng-опциях

Мне нужно использовать ассоциативный массив в качестве источника данных для моих опций выбора, используя AngularJS.

Можно ли использовать такой массив?

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

и получите что-то вроде этого:

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

Я читаю docs, но я не могу понять, как этого добиться.

Ответы

Ответ 1

использовать `ng-option`:

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

или используйте `ng-repeat`:

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

данные в контроллере:

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

Ответ 2

В следующей статье обсуждается множество способов использования ngOptions (самое ясное, самое подробное объяснение, которое я когда-либо видел): http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

Ответ 3

Ответа на этот вопрос Chen-Tsu Lin дает оба способа доступа к объектам. Просто хочу добавить еще несколько строк -

Поскольку директива ng-repeat повторяет блок HTML-кода для каждого элемента в массиве, его можно использовать для создания параметров в раскрывающемся списке, но директива ng-options была сделана специально для заполнения раскрывающегося списка опциями и имеет как минимум одно важное преимущество:

Выпадающие окна, сделанные с помощью ng-options, позволяют выбранному значению быть объект, а выпадающие списки, сделанные из ng-repeat, должны быть строкой.

Добавление примера для ссылки:

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

Для полной справки перейдите на http://www.w3schools.com/angular/angular_select.asp