AngularJSAngularJS select中ngOptions用法详解

一、用法

ngOption针对不同门类的数据源有差之用法,主要体现在数组和目标及。

数组:

label for value in array 

select as label for value in array

label group by group for value in array

select as label group by group for value in array

select as label group by group for value in array track by trackexpr

对象:

label for ( key , value ) in object

select as label for ( key , value ) in object

label group by group for ( key , value ) in object

select as label group by group for ( key , value ) in object

说明:

array / object: 数据源的种类,有数组和目标少栽

value:迭代经过被,引用数组的宗或目标的属于性值

key:迭代进程被,引用对象的属性名

label:选项显示的竹签,用户可观看的

select:结果绑定到ngModel中,如果无点名,则默认绑定value

group:group by的规格,表示按照某条件进行分组

trackexpr:用于唯一确定数组中之迭代项之表达式

二、实例

通用的js代码:

<script>
    var MyModule = 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>

label for value in array

html:

<select ng-model="myColor" ng-options="color.name for color in colors"></select>

效果:

AngularJS 1

AngularJS 2AngularJS 3vii5%7Bt.png)

 


select as label for value in array

html:

<select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>

效果:

 AngularJS 4

 


 label group by group for value in array

html:

<select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>

效果:

AngularJS 5

AngularJS 6AngularJS 7

 


 select as label group by group for value in array

html:

<select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">

效果:

AngularJS 8

AngularJS 9AngularJS 10 


 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">

效果:

AngularJS 11

AngularJS 12AngularJS 13 


 label for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key for (key, value) in object"></select>

效果:

AngularJS 14

AngularJS 15AngularJS 16 


 select as label for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key as key for (key, value) in object"></select>

效果:

AngularJS 17

AngularJS 18AngularJS 19 


 label group by group for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>

效果:

AngularJS 20

AngularJS 21AngularJS 22 


 select as label group by group for ( key , value ) in object

html:

<select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>

效果:

AngularJS 23

AngularJS 24AngularJS 25

 

相关文章