javascript - 如何在AngularJS的ng-options中设置value属性？(How do I set the value property in AngularJS' ng-options?)

Question

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.

(它应该（并且可能是）设置选项值最简单的事情，但到目前为止我还没有得到它。)

  ask by Jukka Puranen translate from so

Answer 1

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)对解构的。)