如何在 AngularJS 的 ng-options 中设置 value 属性? [英] How do I set the value property in AngularJS' ng-options?
问题描述
这似乎困扰着很多人(包括我).
在 AngularJS 中使用 ng-options 指令填充 <select> 标签的选项时，我不知道如何设置选项.这方面的文档确实不清楚 - 至少对于像我这样的傻瓜来说是这样.
我可以像这样轻松设置选项的文本:
ng-options="select p.text for p in resultOptions"当 resultOptions 是例如:
设置选项值应该是(并且可能是)最简单的事情，但到目前为止我只是不明白.
ngOptions(optional) – {
comprehension_expression=} – 在其中之一以下表格:对于数组数据源:
数组中值的标签选择作为数组中值的标签对数组中的值进行分组标签通过 trackexpr 为数组 track 中的值逐组选择标签对于对象数据源:对象中(键，值)的标签选择作为对象中(键，值)的标签按组为对象中的(key, value)标签按组为对象中的(key, value)选择标签
在你的情况下，应该是
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 属性设置实际值.
如何记住这些丑陋的东西
致所有很难记住这种语法形式的人:我同意这不是最简单或最漂亮的语法.这种语法是 Python 列表推导式的扩展版本，知道它可以帮助我很容易地记住语法.是这样的:
Python 代码:
my_list = [x**2 for x in [1, 2, 3, 4, 5]]>[1, 4, 9, 16, 25]# 让 people 成为 person 实例的列表my_list2 = [person.name for person in people]>my_list2 = ['爱丽丝'，'鲍勃']这实际上与上面列出的第一个语法相同.然而，在 中，我们通常需要区分代码中的实际值和 元素中显示的文本(标签).>
比如，我们在代码中需要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) 对进行解构的.
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. 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:
[
{
"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.
See ngOptions
ngOptions(optional) – {
comprehension_expression=} – in one of the following forms:For array data sources:
label for value in arrayselect as label for value in arraylabel group by group for value in arrayselect as label group by group for value in array track by trackexprFor object data sources:label for (key , value) in objectselect as label for (key , value) in objectlabel group by group for (key, value) in objectselect 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.
<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. It's something like this:
Python code:
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.
Like, we need person.id in the code, but we don't want to show the id to the user; we want to show its name. Likewise, we're not interested in the person.name in the code. There comes the as keyword to label stuff. 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. See below:
person as person.name for person in people
For JavaScript objects, the same method applies as well. Just remember that the items in the object is deconstructed with (key, value) pairs.
这篇关于如何在 AngularJS 的 ng-options 中设置 value 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
