angularjs之ng-option
阿新 • • 發佈:2017-08-16
顯示 for coffee 網址 col 聲音 str track data
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