以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
对于对象:
<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>
其他回答
您可以使用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>
效果很好
根据我的说法，这是最适合所有场景的:
<select ng-model="mySelection.value">
<option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
</option>
</select>
您可以使用您的模型来绑定数据。您将获得对象将包含的值以及基于您的场景的默认选择。
今天我已经为这个问题纠结了一段时间。我通读了AngularJS的文档，这篇文章和其他一些文章，还有一些它们指向的博客。他们都帮助我理解了更细微的细节，但最终这似乎是一个令人困惑的话题。主要是因为ng-options的许多语法细微差别。
最后，对我来说，它归结为少即是多。
给定一个作用域，配置如下:
//Data used to populate the dropdown list
$scope.list = [
{"FirmnessID":1,"Description":"Soft","Value":1},
{"FirmnessID":2,"Description":"Medium-Soft","Value":2},
{"FirmnessID":3,"Description":"Medium","Value":3},
{"FirmnessID":4,"Description":"Firm","Value":4},
{"FirmnessID":5,"Description":"Very Firm","Value":5}];
//A record or row of data that is to be save to our data store.
//FirmnessID is a foreign key to the list specified above.
$scope.rec = {
"id": 1,
"FirmnessID": 2
};
这就是我想要得到的结果:
<select ng-model="rec.FirmnessID"
ng-options="g.FirmnessID as g.Description for g in list">
<option></option>
</select>
注意，我没有使用track by。使用所选项的跟踪将总是返回与FirmnessID匹配的对象，而不是FirmnessID本身。这现在满足了我的标准，即它应该返回一个数值而不是对象，并且使用ng-options来获得它所提供的性能改进，而不是为生成的每个选项创建一个新的作用域。
同样，我需要空白的第一行，所以我简单地在<select>元素中添加了一个<option>。
这是一个展示我作品的Plunkr。
ng-options指令不会为数组的<options>元素设置value属性:
使用限制。值为极限。“limits”中的“limit”表示:
将<option>的标签设置为limit.text 保存限制。Value值到选择的ng-model中
参见Stack Overflow问题AngularJS ng-options不呈现值。
这就是我解决这个问题的方法。我根据值跟踪了选择，并在JavaScript代码中将所选项目属性设置为模型。
Countries =
[
{
CountryId = 1, Code = 'USA', CountryName = 'United States of America'
},
{
CountryId = 2, Code = 'CAN', CountryName = 'Canada'
}
]
<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">
vm是我的控制器，从服务检索到的控制器中的国家是{CountryId =1, Code =' USA'， CountryName='United States of America'}。
当我从选择下拉菜单中选择了另一个国家，并发布了“保存”页面时，我得到了正确的国家边界。
