一、用法
ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上。
数组:
label for value in array
select as label for value inarray
labelgroup bygroupforvalueinarray
selectaslabelgroup bygroupforvalueinarray
select as label group bygroup for value in array track bytrackexpr
对象:
labelfor( key, value) inobject
selectaslabelfor( key, value) inobject
labelgroup bygroupfor( key, value) inobject
selectaslabelgroup bygroupfor( key, value) inobject
说明:
array / object: 数据源的类型,有数组和对象两种
value:迭代过程中,引用数组的项或者对象的属性值
key:迭代过程中,引用对象的属性名
label:选项显示的标签,用户可看到的
select:结果绑定到ngModel中,如果没有指定,则默认绑定value
group:group by的条件,表示按某条件进行分组
trackexpr:用于唯一确定数组中的迭代项的表达式
二、实例
通用的js代码:
<script> varMyModule = angular.module("MyModule",[]); MyModule.controller("Ctrl",["$scope", function($scope){ $scope.colors =[ {name:‘black‘, shade:‘dark‘}, {name:‘white‘, shade:‘light‘}, {name:‘red‘, shade:‘dark‘}, {name:‘blue‘, shade:‘dark‘}, {name:‘yellow‘, shade:‘light‘} ]; $scope.object ={ dark: "black", light: "red", lai: "red"
}; }]);
</script>
labelfor valuein array
html:
<select ng-model="myColor"ng-options="color.name for color in colors"></select>
效果:
selectas labelfor valuein array
html:
<select ng-model="myColor"ng-options="color.shade as color.name for color in colors"></select>
效果:
labelgroup by groupfor valuein array
html:
<select ng-model="myColor"ng-options="color.name group by color.shade for color in colors"></select>
效果:
selectas labelgroup by groupfor valuein array
html:
<select ng-model="myColor"ng-options="color.name as color.name group by color.shade for color in colors">
效果:
select as label group by group for value in array track by trackexpr
html:
<select ng-model="myColor"ng-options="color.name for color in colors track by color.name">
效果:
labelfor ( key, value) in object
html:
<select ng-model="obj"ng-options="key for (key, value) in object"></select>
效果:
selectas labelfor ( key, value) in object
html:
<select ng-model="obj"ng-options="key as key for (key, value) in object"></select>
效果:
labelgroup by groupfor ( key, value) in object
html:
<select ng-model="obj"ng-options="key group by value for (key, value) in object"></select>
效果:
select as labelgroup by groupfor ( key, value) in object
html:
<select ng-model="obj"ng-options="key as key group by value for (key, value) in object"></select>
效果: