如何在 AngularJS 的 ng-options 中设置 value 属性？

Question

这似乎困扰了很多人（包括我）。

在 AngularJS 中使用 ng-options 指令填充 <select> 标记的选项时，我无法弄清楚如何设置选项的值。这方面的文档真的不清楚 - 至少对于像我这样的傻瓜来说。

我可以像这样轻松地为选项设置文本：

ng-options="select p.text for p in resultOptions"

当resultOptions 例如：

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

设置选项值应该是（并且可能是）最简单的事情，但到目前为止我还是不明白。

Answer 1

见ngOptions

ngOptions(optional) – {comprehension_expression=} – 在其中之一 以下形式：

对于数组数据源： label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr 对于对象数据源： label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

在你的情况下，应该是

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

更新

随着 AngularJS 的更新，现在可以使用 track by 表达式为 select 元素的 value 属性设置实际值。

<select ng-options="obj.text for obj in array track by obj.value">
</select>

如何记住这些丑陋的东西

致所有难以记住这种语法形式的人：我同意这不是最简单或最漂亮的语法。这种语法是 Python 列表推导的一种扩展版本，并且知道这有助于我很容易地记住语法。是这样的：

Python 代码：

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

这实际上与上面列出的第一个语法相同。但是，在<select> 中，我们通常需要区分代码中的实际值和<select> 元素中显示的文本（标签）。

例如，我们在代码中需要person.id，但我们不想向用户显示id；我们想显示它的名字。同样，我们对代码中的person.name 不感兴趣。有 as 关键字来标记东西。于是就变成了这样：

person.id as person.name for person in people

或者，我们可能需要person 实例/引用本身，而不是person.id。见下文：

person as person.name for person in people

对于 JavaScript 对象，同样的方法也适用。请记住，对象中的项目是用(key, value) 对解构的。

Answer 2

值属性如何获取其值：

• 当使用数组作为数据源时，它将是每次迭代中数组元素的索引；
• 当使用对象作为数据源时，它将是每次迭代中的属性名称。

所以在你的情况下应该是：

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Answer 3

我也有这个问题。我无法在 ng-options 中设置我的值。生成的每个选项都设置为 0、1、...、n。

为了使它正确，我在我的 ng-options 中做了这样的事情：

HTML：

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

我使用“track by”将我的所有值设置为room.price。

（这个例子很糟糕：因为如果有多个相同的价格，代码就会失败。所以请确保有不同的值。）

JSON：

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

我是从博文中了解到的How to set the initial selected value of a select element using Angular.JS ng-options & track by。

观看视频。这是一堂很好的课:)

Answer 4

如果您想更改 option 元素的值，因为表单最终会提交到服务器，而不是这样做，

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

你可以这样做：

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

然后将通过正确名称的表单发送预期值。

Answer 5

使用普通表单提交将名为my_hero 的自定义值发送到服务器：

JSON：

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML：

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

服务器将接收iron 或super 作为my_hero 的值。

这类似于the answer by @neemzy，但为value 属性指定单独的数据。

Answer 6

看起来ng-options 使用起来很复杂（可能令人沮丧），但实际上我们遇到了架构问题。

AngularJS 用作动态 HTML+JavaScript 应用程序的 MVC 框架。虽然它的 (V)iew 组件确实提供了 HTML“模板”，但它的主要目的是通过控制器将用户操作与模型中的更改联系起来。因此在 AngularJS 中工作的适当抽象级别是选择元素将模型中的值设置为查询中的值。

• 查询行如何呈现给用户是 (V)iew 关心的问题，ng-options 提供了 for 关键字来指示选项元素的内容应该是什么ie @987654326 @。
• 如何将选定的行呈现给服务器是 (M) 模型的关注点。因此ng-options 提供了as 关键字来指定提供给模型的值，如k as v for (k,v) in objects。

这个问题的正确解决方案本质上是架构性的，涉及重构您的 HTML，以便 (M) 模型在需要时执行服务器通信（而不是用户提交表单）。

如果一个 MVC HTML 页面对于手头的问题是不必要的过度设计：那么只使用 AngularJS 的 (V)iew 组件的 HTML 生成部分。在这种情况下，请遵循用于在<ul /> 下生成元素（例如<li />）的相同模式，并在选项元素上放置一个 ng-repeat：

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

作为kludge，总是可以将select元素的name属性移动到隐藏的input元素中：

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />