查看ngOptions
ngOptions(optional) – { 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 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 的更新,现在可以使用表达式设置元素value
属性的实际值。select
track by
<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)
成对解构的。