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

20 浏览
0 Comments

如何在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"
    }
]

设定选项值应该是（也可能是）最简单的事情，但到目前为止我仍然不明白。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

value属性如何获取其值：

  • 在使用数组作为数据源时，它将是每次迭代中数组元素的索引。
  • 在使用对象作为数据源时，它将是每次迭代中属性的名称。

所以在您的情况下，应该是：

obj = { '1': '1st', '2': '2nd' };

0
0 Comments

请参阅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 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" }];

更新

随着AngularJS的更新，现在可以使用 track by 表达式设置select元素的value属性的实际值。

如何记得这个丑陋的东西

对于那些难以记住这种语法形式的人：我同意这不是最容易或最美丽的句法。这种语法有点类似于Python的list推导式的扩展版，知道这一点可以帮助我很容易记住这个语法。就像这样：

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']

实际上这和上面列出的第一种语法是相同的。但是，在 元素中显示的文本（标签）。

比如，我们在代码中需要使用 person.id，但是我们不想将 id 显示给用户；我们只想显示其名称。同样地，我们对代码中的 person.name 不感兴趣。于是就有了用 as 关键字加标签来区分的方法。如下所示：

person.id as person.name for person in people

或者，我们可能需要的是 person 的实例/引用本身，而不是 person.id。如下所示：

person as person.name for person in people

对于 JavaScript 对象，同样适用这种方法。只需要记住，对象中的项是由 (key, value) 对分解的。

0