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 效果 http://sandbox.runjs.cn/show/nhi8ubrb

<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: "黃"}];}]）;

效果：http://runjs.cn/detail/nhi8ubrb
以上所述就是本文的全部内容了，希望大家能够喜欢。