AngularJS之ng-options指令

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://runjs.cn/detail/nhi8ubrb