AngularJS学习笔记之ng-options指令
程序员文章站
2022-03-14 16:26:56
1.基本下拉效果(lable for value in array)
其中select标签中的ng-model属性必须有,其值为选中的对象或属性值。
<...
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: '黃' }]; }]);
效果:
以上所述就是本文的全部内容了,希望大家能够喜欢。
推荐阅读
-
AngularJS学习笔记之基本指令(init、repeat)
-
smarty学习笔记之常见代码段用法总结_php实例
-
Jquery 基础学习笔记之文档处理_jquery
-
亲密接触PHP之PHP语法学习笔记1_php基础
-
python学习笔记之爬取网页乱码
-
[walkerlee原作]对PHP之函数sprintf()的学习研究笔记_PHP
-
Symfony2框架学习笔记之表单用法详解,symfony2学习笔记_PHP教程
-
Symfony2学习笔记之插件格式分析,symfony2学习笔记_PHP教程
-
Symfony2框架学习笔记之HTTP Cache用法详解_PHP
-
php学习笔记之 函数声明_php基础