以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
而不是使用新的'track by'功能，你可以简单地对一个数组这样做，如果你想要的值与文本相同:
<select ng-options="v as v for (k,v) in Array/Obj"></select>
注意标准语法之间的区别，标准语法将使值成为对象/数组的键，因此对于数组来说是0、1、2等:
<select ng-options"k as v for (k,v) in Array/Obj"></select>
K (v)变成了v (v)
我是根据语法常识发现这一点的。 (k,v)是将数组/对象拆分为键值对的实际语句。
在'k as v'语句中，k将是值，v将是显示给用户的文本选项。我认为“track by”是一种混乱和过度的表达。
其他回答
value属性如何获取其值:
当使用数组作为数据源时，它将是数组元素在每次迭代中的索引; 当使用对象作为数据源时，它将是每次迭代中的属性名。
所以在你的例子中，它应该是:
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
我也有这个问题。我不能在ng-options中设置我的值。生成的每个选项都设置为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设置一个选择元素的初始选择值。
观看视频。这是一个很好的类:)
对于对象:
<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>
如果你想改变选项元素的值，因为表单最终会提交给服务器，而不是这样做，
<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>
你可以这样做:
<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />
然后，期望的值将以正确的名称通过表单发送。
ng-options看起来使用起来很复杂(可能令人沮丧)，但实际上我们有一个架构问题。
AngularJS是动态HTML+JavaScript应用程序的MVC框架。虽然它的(V)视图组件确实提供了HTML“模板”，但它的主要目的是通过控制器将用户操作连接到模型中的更改。因此，在AngularJS中，适当的抽象级别是select元素将模型中的值设置为来自查询的值。
查询行如何呈现给用户是(V)视图关心的问题，ng-options提供了for关键字来指示选项元素的内容应该是什么，即p.text for resultOptions中的p。 所选的行如何呈现给服务器是(M)模型所关心的。因此ng-options提供了as关键字来指定在对象中(k,v)的k和v中向模型提供什么值。
这个问题的正确解决方案是本质上的体系结构，并涉及重构HTML，以便(M)模型在需要时执行服务器通信(而不是用户提交表单)。
如果一个MVC HTML页面对于手头的问题来说是不必要的过度工程:那么只使用AngularJS的(V)视图组件的HTML生成部分。在这种情况下，遵循与生成<ul />'s下的<li />'s相同的模式，并在一个选项元素上放置ng-repeat:
<select name=“value”>
<option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
{{value.text}}
</option>
</select>
作为临时拼凑，我们总是可以将选择元素的name属性移动到一个隐藏的输入元素:
<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />
