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

本文翻译自：How do I set the value property in AngularJS' ng-options?

Here is what seems to be bothering a lot of people (including me). 这似乎困扰了很多人（包括我）。

When using the ng-options directive in AngularJS to fill in the options for a <select> tag, I cannot figure out how to set the value for an option. 在AngularJS中使用ng-options指令填写<select>标签的选项时，我无法弄清楚如何设置选项的值。 The documentation for this is really unclear - at least for a simpleton like me. 这方面的文档真的不清楚 - 至少对像我这样的傻瓜来说。

I can set the text for an option easily like so: 我可以像这样轻松设置选项的文本：

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

When resultOptions is for example: 例如，当resultOptions ：

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

It should be (and probably is) the most simple thing to set the option values, but so far I just don't get it. 它应该（并且可能是）设置选项值最简单的事情，但到目前为止我还没有得到它。

---

#1楼

参考：https://stackoom.com/question/ovwm/如何在AngularJS的ng-options中设置value属性

---

#2楼

See ngOptions 请参阅ngOptions

ngOptions(optional) – { comprehension_expression= } – in one of the following forms: ngOptions（可选） - { comprehension_expression= } - 采用以下形式之一：

For array data sources : 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 For object data sources: 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 对于数组数据源 ： label for value in array select as label for value in array label group by group for value in array select as label for value in array 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 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 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 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 label group by group for (key, value) in object select as label group by group for (key, value) in object

In your case, it should be 在你的情况下，它应该是

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

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

Update 更新

With the updates on AngularJS, it is now possible to set the actual value for the value attribute of select element with track by expression. 通过AngularJS上的更新，现在可以使用track by expression设置select元素的value属性的实际值。

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

How to remember this ugly stuff 如何记住这些丑陋的东西

To all the people who are having hard time to remember this syntax form: I agree this isn't the most easiest or beautiful syntax. 对于所有难以记住这种语法形式的人：我同意这不是最简单或最美妙的语法。 This syntax is kind of an extended version of Python's list comprehensions and knowing that helps me to remember the syntax very easily. 这种语法是Python列表推导的扩展版本，并且知道这有助于我非常容易地记住语法。 It's something like this: 它是这样的：

Python code: 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']

This is actually the same syntax as the first one listed above. 这实际上与上面列出的第一个语法相同。 However, in <select> we usually need to differentiate between the actual value in code and the text shown (the label) in a <select> element. 但是，在<select>我们通常需要区分代码中的实际值和<select>元素中显示的文本（标签）。

Like, we need person.id in the code, but we don't want to show the id to the user; 比如，我们在代码中需要person.id ，但我们不想向用户显示id ; we want to show its name. 我们想要显示它的名字。 Likewise, we're not interested in the person.name in the code. 同样，我们对代码中的person.name不感兴趣。 There comes the as keyword to label stuff. 有标签的as关键字。 So it becomes like this: 所以它变成这样：

person.id as person.name for person in people

Or, instead of person.id we could need the person instance/reference itself. 或者，而不是person.id我们可能需要person实例/引用本身。 See below: 见下文：

person as person.name for person in people

For JavaScript objects, the same method applies as well. 对于JavaScript对象，也适用相同的方法。 Just remember that the items in the object is deconstructed with (key, value) pairs. 请记住，对象中的项目是使用(key, value)对解构的。

---

#3楼

How the value attributes gets its value: 值属性如何获得其值：

• When using an array as datasource, it will be the index of the array element in each iteration; 当使用数组作为数据源时，它将是每次迭代中数组元素的索引;
• When using an object as datasource, it will be the property name in each iteration. 使用对象作为数据源时，它将是每次迭代中的属性名称。

So in your case it should be: 所以在你的情况下它应该是：

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

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

---

#4楼

You can do this: 你可以这样做：

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- UPDATE - 更新

After some updates, user frm.adiputra 's solution is much better. 经过一些更新后， 用户frm.adiputra的解决方案要好得多。 Code: 码：

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

---

#5楼

If you want to change the value of your option elements because the form will eventually be submitted to the server, instead of doing this, 如果要更改option元素的值，因为表单最终将提交给服务器，而不是这样做，

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

You can do this: 你可以这样做：

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

The expected value will then be sent through the form under the correct name. 然后，预期值将通过表格以正确的名称发送。

---

#6楼

The ng-options directive does not set the value attribute on the <options> elements for arrays: ng-options指令不在数组的<options>元素上设置value属性：

Using limit.value as limit.text for limit in limits means: 使用limit.value as limit.text for limit in limits意味着：

set the <option> 's label as limit.text 将<option>的标签设置为limit.text
save the limit.value value into the select's ng-model 将limit.value值保存到select的ng-model

See Stack Overflow question AngularJS ng-options not rendering values . 请参阅Stack Overflow问题AngularJS ng-options不呈现值 。