如何在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).

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

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"

当 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.

推荐答案

参见 ngOptions

ngOptions（可选） - { comprehension_expression = } - 在
以下表格中的一个：

ngOptions(optional) – {comprehension_expression=} – in one of the following forms:

对于数组数据源：
数组中值的标签
选择为数组中值的标签
按组分组标记数组中的值
选择标签按组划分的数组按轨道划分trackexpr
对于对象数据源：
标签为（键，值） in object
选择对象中的（键，值）标签
label group by对象中的（键，值）组
按对象中的（键，值）分组选择标签

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

在您的情况下，它应该是

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>

更新

随着AngularJS的更新，现在可以使用设置选择元素的值属性的实际值跟踪表达。

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>

如何记住这些难看的东西

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

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代码：

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> ; 元素。

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.

比如，我们在代码中需要 person.id 但是我们不想向用户显示 id ;我们想要显示它的名字。同样，我们对代码中的 person.name 不感兴趣。标有内容的为关键字。所以它变成这样：

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

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

Or, instead of person.id we could need the person instance/reference itself. See below:

person as person.name for person in people

对于JavaScript对象，同样的方法也适用。请记住，对象中的项目是使用（键，值）对解构的。

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屋！