以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时,我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如,当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情,但到目前为止,我只是不明白它。
这个问题的正确答案由用户frm提供。Adiputra,因为目前这似乎是显式控制选项元素的value属性的唯一方法。
然而,我只是想强调,“select”在这里不是关键字,而只是表达式的占位符。请参考以下列表,“select”表达式的定义以及ng-options指令中可以使用的其他表达式。
问题中描述的select的用法:
ng-options='select p.text for p in resultOptions'
本质上是错误的。
根据表达式列表,当在对象数组中给出选项时,似乎可以使用trackexpr来指定值,但它仅用于分组。
来自AngularJS的ng-options文档:
array / object: an expression which evaluates to an array / object to
iterate over.
value: local variable which will refer to each item in
the array or each property value of object during iteration.
key: local variable which will refer to a property name in object during
iteration.
label: The result of this expression will be the label for
element. The expression will most likely refer to the value
variable (e.g. value.propertyName).
select: The result of this expression will be bound to the model of the parent element.
If not specified, select expression will default to value.
group: The result of this expression will be used to group options using the DOM
element.
trackexpr: Used when working with an array of objects. The result of this expression will be used
to identify the objects in the array. The trackexpr will most likely refer to the
value variable (e.g. value.propertyName).
就像很多人之前说的,如果我有这样的数据:
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)
运行代码片段并查看变化。为了快速理解,这里有一个注释
例1(对象选择):- ng-option="os.name for os in osList track by os.id"。这里由os跟踪。Id是重要的&应该在那里和os。id不应该出现在os.name之前。
ng-model="my_os"应该设置为一个key为id的对象,例如my_os={id: 2}。
例2(取值选择):- ng-option="os. "id作为osList中os的os.name”。这里由os跟踪。id不应该在那里,os。Id应该在os.name之前。
ng-model="my_os"应该设置为my_os= 2这样的值
其余代码片段将进行解释。
angular.module('app', []).controller('ctrl', function($scope, $timeout){
//************ EXAMPLE 1 *******************
$scope.osList =[
{ id: 1, name :'iOS'},
{ id: 2, name :'Android'},
{ id: 3, name :'Windows'}
]
$scope.my_os = {id: 2};
//************ EXAMPLE 2 *******************
$timeout(function(){
$scope.siteList = [
{ id: 1, name: 'Google'},
{ id: 2, name: 'Yahoo'},
{ id: 3, name: 'Bing'}
];
}, 1000);
$scope.my_site = 2;
$timeout(function(){
$scope.my_site = 3;
}, 2000);
})
fieldset{
margin-bottom: 40px;
}
strong{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<!--//************ EXAMPLE 1 *******************-->
<fieldset>
<legend>Example 1 (Set selection as <strong>object</strong>)</legend>
<select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
<option value="">--Select--</option>
</select>
{{my_os}}
</fieldset>
<!--//************ EXAMPLE 2 *******************-->
<fieldset>
<legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
<select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
<option value="">--Select--</option>
</select>
{{my_site}}
</fieldset>
</div>
以下是我如何在遗留应用程序中解决这个问题:
在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正确地显示了选项值。
今天我已经为这个问题纠结了一段时间。我通读了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。