以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
对我来说，布鲁诺·戈麦斯的答案是最好的答案。
但实际上，您不需要担心设置select options的value属性。AngularJS会处理这个。让我详细解释一下。
请考虑这把小提琴
angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {
$scope.timeFormatTemplates = [{
label: "Seconds",
value: 'ss'
}, {
label: "Minutes",
value: 'mm'
}, {
label: "Hours",
value: 'hh'
}];
$scope.inactivity_settings = {
status: false,
inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
//time_format: 'ss', // Second (default value)
time_format: $scope.timeFormatTemplates[0], // Default seconds object
};
$scope.activity_settings = {
status: false,
active_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
//time_format: 'ss', // Second (default value)
time_format: $scope.timeFormatTemplates[0], // Default seconds object
};
$scope.changedTimeFormat = function (time_format) {
'use strict';
console.log('time changed');
console.log(time_format);
var newValue = time_format.value;
// do your update settings stuffs
}
});
正如你在fiddle输出中看到的，无论你为选择框选项选择了什么，它都是你的自定义值，或者AngularJS自动生成的0、1、2值，这在你的输出中并不重要，除非你使用jQuery或任何其他库来访问选择组合框选项的值并相应地操作它。
其他回答
用一个普通的表单提交发送一个名为my_hero的自定义值给服务器:
JSON:
"heroes": [
{"id":"iron", "label":"Iron Man Rocks!"},
{"id":"super", "label":"Superman Rocks!"}
]
HTML:
<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />
服务器将接收my_hero的值为iron或super。
这类似于@neemzy的回答，但是为value属性指定了单独的数据。
开发人员使用ng-options总是很痛苦的。例如:在select标记中获取空/空的选定值。特别是在ng-options中处理JSON对象时，它变得更加乏味。这里我已经做了一些练习。
目的:通过ng-option迭代JSON对象数组，并设置选中的第一个元素。
数据:
someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]
在选择标签中，我必须显示xyz和abc，其中xyz必须毫不费力地选择。
HTML:
<pre class="default prettyprint prettyprinted" style=""><code>
<select class="form-control" name="test" style="width:160px" ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]">
</select>
</code></pre>
通过上面的代码示例，您可能会摆脱这种夸张。
另一个参考:
ngOptions指令:
$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];
Case-1)数组中值的标签: < div > <p>selected item is: {{selectedItem}}</p> . {{selectedItem} <p>年龄的选定项目是:{{selectedItem。年龄}}< / p > <select ng-model="selectedItem" ng-options="item.name for item in items"> < /选择> < / div >
输出说明(假设选择了第一项):
selectedItem = {name: 'a'， age: 20} //[默认情况下，所选项目等于值item]
selectedItem.age = 20
Case-2)为数组中的值选择标签: < div > <p>selected item is: {{selectedItem}}</p> . {{selectedItem} <select ng-model="selectedItem" ng-options="item。年龄为项目"> "中项目的item.name < /选择> < / div >
输出说明(假设选择了第一项): selectedItem = 20 // [select part is item.age]
这就是我解决这个问题的方法。我根据值跟踪了选择，并在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'}。
当我从选择下拉菜单中选择了另一个国家，并发布了“保存”页面时，我得到了正确的国家边界。
我也有这个问题。我不能在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设置一个选择元素的初始选择值。
观看视频。这是一个很好的类:)
