我如何在AngularJS中设置value属性
这似乎困扰了很多人(包括我)。
当在AngularJS中使用ng-options
指令来填充<select>
标签的选项时,我无法弄清楚如何设置选项的值。 这方面的文档还不太清楚 - 至少对于像我这样的傻瓜来说。
我可以像这样轻松地设置选项的文本:
ng-options="select p.text for p in resultOptions"
当resultOptions
是例如:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(也可能是)设置选项值的最简单的事情,但到目前为止,我只是不明白。
请参阅ngOptions
ngOptions(可选) - { comprehension_expression=
} - 采用以下形式之一:
对于数组数据源: 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 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
表达式来设置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, 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>
元素中显示的文本(标签)。
就像,我们需要在代码中使用person.id
,但我们不想向用户显示id
; 我们想显示它的名字。 同样,我们对代码中的person.name
不感兴趣。 有来了as
关键字标记的东西。 所以它变成这样:
person.id as person.name for person in people
或者,而不是person.id
我们可能需要person
实例/参考本身。 见下文:
person as person.name for person in people
对于JavaScript对象,同样的方法也适用。 请记住,对象中的项目使用(key, value)
对进行解构。
价值属性如何获得其价值:
所以你的情况应该是:
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
我也有这个问题。 我无法在ng选项中设定我的价值。 每个生成的选项都设置为0,1,...,n。
为了使它正确,我在ng-options中做了这样的事情:
HTML:
<select ng-options="room.name for room in Rooms track by room.price">
<option value="">--Rooms--</option>
</select>
我使用“track by”来设置room.price
。
(这个例子很糟糕:因为如果有不止一个价格相等,代码将会失败,所以请确保有不同的值。)
JSON:
$scope.Rooms = [
{ name: 'SALA01', price: 100 },
{ name: 'SALA02', price: 200 },
{ name: 'SALA03', price: 300 }
];
我从博客文章中了解到如何使用Angular.JS ng-options&track by设置选择元素的初始选定值。
观看视频。 这是一个很好的课程:)
链接地址: http://www.djcxy.com/p/36577.html