Question

我需要使用关联数组作为使用AngularJS的select选项的数据源。

是否可以使用这样的数组？

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

得到这样的东西：

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

我读过docs，但我无法理解如何实现这一目标。

Answer 1

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

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

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

Answer 2

以下文章讨论了使用ngOptions的各种方法（到目前为止，我见过的最清晰，最全面的解释）：http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

Answer 3

Chen-Tsu Lin的回答实际上提供了访问对象的两种方式。只想添加更多行 -

因为ng-repeat指令为数组中的每个项重复了一段HTML代码，所以它可用于在下拉列表中创建选项，但ng-options指令专门用于填充a带有选项的下拉列表，至少有一个重要优势：

使用ng-options进行的下拉菜单允许选定的值为a 对象，而从ng-repeat下拉的下拉列表必须是一个字符串。

添加参考示例：