|
If you use the track by option, the value attribute is correctly written, e.g.:
<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
<select ng-model="foo" ng-options="x.label for x in a track by x.value"/>
</div>
produces:
<select>
<option value="" selected="selected"></option>
<option value="15">one</option>
<option value="20">two</option>
</select>
|
摘自:https://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select
ng-options="p.id as p.title for p in curOptionArray"
ng-options使用as来指定option的value属性为p.id,文本内容为p.title,同时还指定select的ng-model值为选中的p.id
p.id是select提交的值 p.title是select显示的值 p代表数组curOptionArray里面的当前元素
p.id是option标签的value属性,p.title是option标签的文本内容
如果没有使用as来指定select提交的值为p.id,当选中p.title,select的ng-model值为p
使用track by p.id仍然能指定option的value属性为p.id,但没有使用as时选中p.title,select的ng-model值为p
比如上述代码中,如果选择了one,则对应$scope.foo为对象{label: 'one', value: 15},
虽然html上<option value="15">one</option>的value属性为15
如果使用ng-options="x.value as x.label for x in a"
当选择one时,则$scope.foo为15
可参考官网:
https://docs.angularjs.org/api/ng/directive/ngOptions#!
更常用更普遍的做法是用as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="hd" ng-controller="ctrl">
<select ng-options="v.value as v.name for v in data" ng-model="city">
<option value="">请选择城市</option>
</select>
{{city}}
</div>
<script>
var m = angular.module('hd', []);
m.controller('ctrl', ['$scope', function ($scope) {
$scope.city = 'beijing';
$scope.data = [
{name: '广东', value: 'guangdong'},
{name: '北京', value: 'beijing'},
{name: '南京', value: 'nanjing'},
];
}]);
</script>
</body>
</html>
其中v.value的值被绑定在option的value属性里面,v.name则赋值给了option标签里的内容
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择。当select中一个选项被选择,该选项将会被绑定到ng-model。如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection[3]。
之前一直在用ng-repeat就见到过track by,没有去了解它的用法,这次了解了一下。track by主要是防止值有重复,angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定,以方便追踪数据。例如:items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错,而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。
ng-options一般有以下用法:
对于数组:
- label for value in array
- select as label for value in array
- label group by group for value in array
- label disable when disable for value in array
- label group by group for value in array track by trackexpr
- label disable when disable for value in array track by trackexpr
- label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
- 对于对象:
- label for (key , value) in object
- select as label for (key ,value) in object
- label group by group for (key,value) in object
- label disable when disable for (key, value) in object
- select as label group by group for(key, value) in object
- select as label disable when disable for (key, value) in object
一个简单的例子: