以下是困扰很多人(包括我)的问题。
当在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="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>
其他回答
用一个普通的表单提交发送一个名为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属性指定了单独的数据。
而不是使用新的'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”是一种混乱和过度的表达。
就像很多人之前说的，如果我有这样的数据:
countries : [
{
"key": 1,
"name": "UAE"
},
{
"key": 2,
"name": "India"
},
{
"key": 3,
"name": "OMAN"
}
]
我会这样使用它:
<select
ng-model="selectedCountry"
ng-options="obj.name for obj in countries">
</select>
在你的控制器中，你需要设置一个初始值来消除第一个空项:
$scope.selectedCountry = $scope.countries[0];
// You need to watch changes to get selected value
$scope.$watchCollection(function() {
return $scope.selectedCountry
}, function(newVal, oldVal) {
if (newVal === oldVal) {
console.log("nothing has changed " + $scope.selectedCountry)
}
else {
console.log('new value ' + $scope.selectedCountry)
}
}, true)
一年后，我不得不找到这个问题的答案，因为这些问题都没有给出实际答案，至少对我来说是这样。
你问过如何选择选项，但没有人说这两件事不一样:
如果我们有这样的选项:
$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/。
你可以这样做:
<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>
