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

前端之家收集整理的这篇文章主要介绍了如何在AngularJS的ng-options中设置value属性?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是什么似乎困扰了很多人(包括我)。

当在AngularJS中使用ng-options指令来填充标签,我不知道如何设置一个选项的值。这个文档真的不清楚 – 至少对于像我这样的简单。

我可以很容易地设置一个选项的文本:

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

当resultOptions例如:

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

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

See 07000

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

在你的情况下,它应该是

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 expression的select元素的value属性设置实际值。

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

如何记住这个丑陋的东西

对所有有困难的时候记住这种语法形式的人:我同意这不是最简单或美丽的语法。这种语法是Python的列表推导的扩展版本,知道这有助于我很容易记住语法。它是这样的:

Python代码

my_list = [x**2 for x in [1,2,3,4,5]]
> [1,9,16,25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice','Bob']

这实际上是与上面列出的第一个语法相同的语法。但是,在我们通常需要区分代码中的实际值和显示的文本(标签)中的元件。

像,我们在代码中需要person.id,但是我们不想向用户显示id;我们想要显示它的名字。同样,我们对代码中的person.name不感兴趣。有关键字标签的东西。所以它变成这样:

person.id as person.name for person in people

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

person as person.name for person in people

对于JavaScript对象,同样的方法也适用。只要记住对象中的项目是用(key,value)对来解构的。

猜你在找的Angularjs相关文章