以下是困扰很多人(包括我)的问题。

当在AngularJS中使用ng-options指令来填充<select>标记的选项时,我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。

我可以像这样轻松地设置一个选项的文本:

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

例如,当resultOptions为:

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

它应该是(可能是)设置选项值最简单的事情,但到目前为止,我只是不明白它。


当前回答

ng-options指令不会为数组的<options>元素设置value属性:

使用限制。值为极限。“limits”中的“limit”表示:

将<option>的标签设置为limit.text 保存限制。Value值到选择的ng-model中

参见Stack Overflow问题AngularJS ng-options不呈现值。

其他回答

以下是我如何在遗留应用程序中解决这个问题:

在HTML中:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

在JavaScript中:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

我的HTML正确地显示了选项值。

这个问题的正确答案由用户frm提供。Adiputra,因为目前这似乎是显式控制选项元素的value属性的唯一方法。

然而,我只是想强调,“select”在这里不是关键字,而只是表达式的占位符。请参考以下列表,“select”表达式的定义以及ng-options指令中可以使用的其他表达式。

问题中描述的select的用法:

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

本质上是错误的。

根据表达式列表,当在对象数组中给出选项时,似乎可以使用trackexpr来指定值,但它仅用于分组。


来自AngularJS的ng-options文档:

array / object: an expression which evaluates to an array / object to iterate over. value: local variable which will refer to each item in the array or each property value of object during iteration. key: local variable which will refer to a property name in object during iteration. label: The result of this expression will be the label for element. The expression will most likely refer to the value variable (e.g. value.propertyName). select: The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value. group: The result of this expression will be used to group options using the DOM element. trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).

根据我的说法,这是最适合所有场景的:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

您可以使用您的模型来绑定数据。您将获得对象将包含的值以及基于您的场景的默认选择。

See ngOptions 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表达式为select element的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>元素中显示的文本(标签)。

比如,我们需要人手。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)对解构的。

你可以这样做:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

- - -更新

经过一些更新后,用户frm。Adiputra的解决方案要好得多。代码:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>