如何设置AngularJS'NG选项的值属性？ [英] How to set the value property in AngularJS' ng-options?

问题描述

下面是哪里不舒服，很多人（包括我）。
当使用 NG-选项指令在AngluarJS填补了＆LT的选项;选择＆GT; 标签我想不通如何设置一个选项的值。造成这种情况的文档非常清楚 - 至少对像我这样的傻瓜。

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

  NG-选项=选择p.text在resultOptions P
 

在 resultOptions 是例如：

  [
    {
        值：1，
        文：1
    }，
    {
        值：2，
        文：第二届
    }
]
 

应该是（也许是）最简单的事设置的选项值，但到目前为止，我只是不明白这一点。

解决方案

  

<一个href=\"http://docs.angularjs.org/api/ng.directive:select\">http://docs.angularjs.org/api/ng.directive:select

  
  

ngOptions（可选） - { COM prehension_ex pression = } - 在一
  以下几种形式：

  
  

的数组数据源的：结果
  标签中的数组值结果
  选择作为标签的数组值结果
  通过为数组值组标签组结果
  按trackexpr 结果通过为阵列的轨道值组选作标签组
  的对象的数据源：的结果
  标签中的对象（键，值）结果
  选择作为标签的对象（键，值）结果
  按组标签组中的对象（键，值）结果
  按组选作标签组（键，值）的目标

在您的情况下，它应该是

 阵列= [{值：1，文：1}，{价值：2，文：第二届}];＆LT;选择NG选项=obj.value作为obj.text在阵列OBJ＆GT;＆LT; /选择＆GT;
 

更新

随着角度的更新，现在可以设置为值的属性选择的实际值通过前pression与跟踪元素。

 ＆LT;选择NG选项=obj.text由obj.value阵列跟踪目标文件＆GT;
＆LT; /选择＆GT;
 

如何记住这个丑陋的东西

要所有谁是有很难记住这个语法形式的人：我同意这不是最简单或漂亮的语法。这个语法是一种Python的名单COM prehensions的扩展版本，并知道帮助我很容易记住的语法。这件事情是这样的：

Python的code：

  my_list = [X ** 2英寸×[1，2，3，4，5]
＆GT; [1,4，9，16，25]
＃让人们以人实例的列表
my_list2 = [在人们person.name的人]
＆GT; my_list2 = ['爱丽丝'，'鲍勃']
 

这实际上是相同的语法上面列出的第一个。然而，在＆LT;选择＆GT; 我们通常需要在code和实际值的显示的文本（标签）来区分 ＆LT;选择＆GT; 元素。就像，我们需要 person.id 在code，但我们不希望显示 ID 来用户，我们要显示它的名字。同样的，我们不是在code感兴趣的 person.name 。总会有为关键字标签的东西。因此，它变成这样：

  person.id为person.name的人的人
 

或者，而不是 person.id 我们可以需要人实例/引用自身。见下图：

 人作为person.name的人的人
 

有关JS对象，同样的方法也适用，只记得在对象中的物品被解构与（键，值）对。

Here is what seems to be bothering a lot of people (including me). When using the ng-options directive in AngluarJS 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"
    }
]

Should be (and probably is) the most simple thing to set the option values, but so far I just don't get it.

解决方案

http://docs.angularjs.org/api/ng.directive:select

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

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>

Update

With the updates on Angular, 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 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 JS objects, the same method applies as well, just remember that the items in the object is deconstructed with (key, value) pairs.

这篇关于如何设置AngularJS'NG选项的值属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！