码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS select中ngOptions用法详解

时间:2016-07-21 00:35:48      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

 

AngularJS select中ngOptions用法详解
一、用法
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>
效果:
技术分享
 
 
 

AngularJS select中ngOptions用法详解

标签:

原文地址:http://www.cnblogs.com/Jerry-spo/p/5690041.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!