以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
一年后，我不得不找到这个问题的答案，因为这些问题都没有给出实际答案，至少对我来说是这样。
你问过如何选择选项，但没有人说这两件事不一样:
如果我们有这样的选项:
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
我们试着像这样设置一个默认选项:
$scope.incorrectlySelected = { label: 'two', value: 2 };
它不会工作，但如果你尝试选择这样的选项:
$scope.correctlySelected = $scope.options[1];
它会起作用的。
尽管这两个对象具有相同的属性，AngularJS仍然将它们视为DIFFERENT，因为AngularJS是通过引用进行比较的。
看看小提琴http://jsfiddle.net/qWzTb/。
其他回答
您可以使用ng-options实现选择标记绑定到值和显示成员
在使用此数据源时
countries : [
{
"key": 1,
"name": "UAE"
},
{
"key": 2,
"name": "India"
},
{
"key": 3,
"name": "OMAN"
}
]
可以使用下面的代码将选择标记绑定到值和名称
<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>
效果很好
value属性如何获取其值:
当使用数组作为数据源时，它将是数组元素在每次迭代中的索引; 当使用对象作为数据源时，它将是每次迭代中的属性名。
所以在你的例子中，它应该是:
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
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}}” />
以下是我如何在遗留应用程序中解决这个问题:
在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正确地显示了选项值。
<select ng-model="output">
<option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>
