我如何在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

    上一篇: How do I set the value property in AngularJS' ng

    下一篇: How to make a button that opens an html page?