AngularJS学习笔记之ng-options指令

前端之家收集整理的这篇文章主要介绍了AngularJS学习笔记之ng-options指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.基本下拉效果(lable for value in array)

  其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。

usage:label for value in array

选项,{{selected}}

m1.controller("ngselect",['$scope',function($sc){ $sc.selected = ''; $sc.optData = [{ id: 10001,MainCategory: '男',ProductName: '水洗T恤',ProductColor: '白' },{ id: 10002,MainCategory: '女',ProductName: '圓領短袖',ProductColor: '黃' },{ id: 10003,ProductColor: '黃' }]; }]);

2.自定义下拉显示名称(label for value in array)

label可以根据需要拼接出不同的字符串

usage:label for value in array(label可以根据需求拼接出不同的字符串)

选项,{{selected}}

m1.controller("ngselect2",ProductColor: '黃' }]; }]);

3.ng-options 选项分组

group by分组项

usage:label group by groupName for value in array

选项,{{selected}}

m1.controller("ngselect3",ProductName: '圓領长袖',ProductColor: '黃' }]; }]);

4.ng-options 自定义ngModel的绑定

下面selected的值为optData的id 效果

usage:select as label for value in array

选项,{{selected}}

m1.controller("ngselect4",ProductColor: '黃' }]; }]);

效果:

以上所述就是本文的全部内容了,希望大家能够喜欢。

猜你在找的JavaScript相关文章