ng-options 中的键值对

Posted 2023-03-11

【中文标题】ng-options 中的键值对

【英文标题】：key-value pairs in ng-options

【发布时间】：2014-03-11 04:01:20

【问题描述】：

我需要使用 关联数组 作为我使用 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，但我不明白如何实现这一点。

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

我强烈建议避免使用 ng-repeat 方法，因为它会为每个键/值对添加 2 个新手表。所以基本上如果你的选择包含 50 个项目，你就创建了 100 个新的观察者。哎呀。

如果您需要使用ng-repeat 并且您的键/值不变，我认为您可以通过使用新的one-time binding 语法避免@MarkusHay 提到的2 个新手表：<option ng-repeat="(key, value) in data" value="::key">::value</option>

谢谢，比ngOption 的官方文档清楚得多。

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

非常好，但无法使用 'ng-options' 设置默认选中项

【参考方案3】：

以下文章讨论了您可以使用 ngOptions 的各种方式（迄今为止我见过的最清晰、最彻底的解释）：http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

【讨论】：

谢谢伙计，不得不说这个链接是迄今为止最好的。 :-)