在ng-options键值对

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

我需要使用一个关联数组作为数据源来使用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.

我读过文档，但我不明白如何实现它。

3 个解决方案

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

#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/

下面的文章讨论了使用ngOptions的各种方法(到目前为止，这是我所见过的最清晰、最彻底的解释):http://www.undefinednull.com/2014/08/11/a-brief-walk-through- ng- options-inangularjs/

#3

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

Chen-Tsu Lin的回答实际上给出了访问对象的两种方式。只是想再加几行-

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:

因为ng-repeat指令重复一个数组中每个条目的HTML代码块，它可以用来在下拉列表中创建选项，但是ng-options指令是专门为用选项填充下拉列表而制定的，它至少有一个重要的优点:

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

使用ng-options的下拉允许选择的值是对象，而使用ng-repeat的下拉必须是字符串。

Adding an example for the reference:

增加一个例子作为参考:

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

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

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

如需完整参考，请登录http://www.w3schools.com/angular/angular_select.asp。