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

效果:

图片 1

图片 2图片 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>

效果:

 图片 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>

效果:

图片 5

图片 6图片 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">

效果:

图片 8

图片 9图片 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">

效果:

图片 11

图片 12图片 13 


 label for ( key , value ) in object

html:

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

效果:

图片 14

图片 15图片 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>

效果:

图片 17

图片 18图片 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>

效果:

图片 20

图片 21图片 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>

效果:

图片 23

图片 24图片 25

 

相关文章