angularjs之ng-option

標籤：旅遊   --   音樂   字串   聲音   爸爸   距離   options   ons   

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