ng-options中的键/值对


74

我需要将关联数组用作select使用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,但是我不明白如何实现这一目标。

Answers:


161

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

31
我强烈建议您避免使用ng-repeat方法,因为它为每个键/值对添加了2个新手表。因此,基本上,如果您选择的项目包含50个项目,则您刚刚创建了100个新的观察者。kes。
Markus Hay

9
如果您需要使用ng-repeat并且您的键/值不变,那么我认为您可以通过使用新的一次性绑定语法来避免提到2款新手表@MarkusHay :<option ng-repeat="(key, value) in data" value="{{::key}}">{{::value}}</option>
Alex Ross

2
谢谢,比的官方文档清楚得多ngOption
彼得·佩勒

1
使用ng-option:我看到了很多ng-options基于的解决方案,object但这是最好的
Mosh Feu

2
非常好,但是无法使用'ng-options'设置默认的选定项
Rahul Matte


3

林振T的回答实际上给出了两种访问对象的方式。只想增加几行-

由于该ng-repeat指令为数组中的每个项目重复了一段HTML代码,因此可用于在下拉列表中创建选项,但是ng-options指令专门用于用选项填充下拉列表,并且至少具有一个重要的优点:

使用的下拉列表ng-options允许将所选值作为对象,而使用的下拉列表ng-repeat则必须是字符串。

添加示例供参考:

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

ng-optionshttp//www.w3schools.com/angular/tryit.asp?filename = try_ng_select_object

有关完整参考,请访问http://www.w3schools.com/angular/angular_select.asp

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.