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)

    <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 选项分组

    <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的绑定

    <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