angularjs之ng-option

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

1.基本下拉效果(lable for value in array)

　　其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。

<div ng-controller="ngselect">

    <p>usage:label for value in array</p>

    <p>选项，{{selected}}</p>

    <select ng-model="selected" ng-options="o.id for o in optData">

        <option value="">-- 请选择 --</option>

    </select>

</div>

m1.controller("ngselect",['$scope',function($sc){

    $sc.selected = '';

    $sc.optData = [{

        id: 10001,

        MainCategory: '男',

        ProductName: '水洗T恤',

        ProductColor: '白'

    },{

        id: 10002,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    },{

        id: 10003,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    }];

}]);

2.自定义下拉显示名称(label for value in array)

label可以根据需要拼接出不同的字符串

<div ng-controller="ngselect2">

    <p>usage:label for value in array(label可以根据需求拼接出不同的字符串)</p>

    <p>选项，{{selected}}</p>

    <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) for o in optData">

        <option value="">-- 请选择 --</option>

    </select>

</div>

m1.controller("ngselect2",['$scope',function($sc){

    $sc.selected = '';

    $sc.optData = [{

        id: 10001,

        MainCategory: '男',

        ProductName: '水洗T恤',

        ProductColor: '白'

    },{

        id: 10002,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    },{

        id: 10003,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    }];

}]);

3.ng-options 选项分组

group by分组项

<div ng-controller="ngselect3">

    <p>usage:label group by groupName for value in array</p>

    <p>选项，{{selected}}</p>

    <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) group by o.MainCategory for o in optData">

        <option value="">-- 请选择 --</option>

    </select>

</div>

m1.controller("ngselect3",['$scope',function($sc){

    $sc.selected = '';

    $sc.optData = [{

        id: 10001,

        MainCategory: '男',

        ProductName: '水洗T恤',

        ProductColor: '白'

    },{

        id: 10002,

        MainCategory: '女',

        ProductName: '圓領长袖',

        ProductColor: '黃'

    },{

        id: 10003,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    }];

}]);

4.ng-options 自定义ngModel的绑定

下面selected的值为optData的id

<div ng-controller="ngselect4">

    <p>usage:select as label for value in array</p>

    <p>选项，{{selected}}</p>

    <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData">

        <option value="">-- 请选择 --</option>

    </select>

</div>

m1.controller("ngselect4",['$scope',function($sc){

    $sc.selected = '';

    $sc.optData = [{

        id: 10001,

        MainCategory: '男',

        ProductName: '水洗T恤',

        ProductColor: '白'

    },{

        id: 10002,

        MainCategory: '女',

        ProductName: '圓領长袖',

        ProductColor: '黃'

    },{

        id: 10003,

        MainCategory: '女',

        ProductName: '圓領短袖',

        ProductColor: '黃'

    }];

}]);

5.ng-options 多级下拉

<div ng-controller="ngselect5">

    <select ng-model="selectedPerson" ng-options="obj.name for obj in people"></select>

    <select ng-model="selectedGenre">

        <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>

    </select>

</div>

m1.controller("ngselect5",['$scope',function($sc){

$sc.people = [

                    {

                            id: 0,

                            name: '张三',

                            interest: [

                            '爬山',

                            '游泳',

                            '旅游',

                            '美食'

                        ]

                    },

                    {

                        id: 1,

                        name: '李四',

                        interest: [

                            '音乐',

                            '美食',

                            'Coffee',

                            '看书'

                        ]

                    },

                    {

                        id: 2,

                        name: '王五',

                        interest: [

                            '音乐',

                            '电影',

                            '中国好声音',

                            '爸爸去哪了',

                            '非常静距离'

                        ]

                    },

                    {

                        id: 3,

                        name: '小白',

                        interest: [

                            '游泳',

                            '游戏',

                            '宅家里'

                        ]

                    }

                ];

}]);

原网址：http://www.cnblogs.com/zhx1991/p/4579886.html

巴特西

angularjs之ng-option

最新文章

热门文章