AngularJS学习笔记之ng-options指令


Posted in Javascript onJune 16, 2015

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: '?A?短袖',
    ProductColor: '?'
  },{
    id: 10003,
    MainCategory: '女',
    ProductName: '?A?短袖',
    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: '?A?短袖',
    ProductColor: '?'
  },{
    id: 10003,
    MainCategory: '女',
    ProductName: '?A?短袖',
    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: '?A?长袖',
    ProductColor: '?'
  },{
    id: 10003,
    MainCategory: '女',
    ProductName: '?A?短袖',
    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: '?A?长袖',
    ProductColor: '?'
  },{
    id: 10003,
    MainCategory: '女',
    ProductName: '?A?短袖',
    ProductColor: '?'
  }];
}]);

效果:http://runjs.cn/detail/nhi8ubrb

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

Javascript 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
angularJS深拷贝详解
Mar 23 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 #Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 #Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 #Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 #Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 #Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 #Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 #Javascript
You might like
php异常处理使用示例
2014/02/25 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
python文件比较示例分享
2014/01/10 Python
详解python3实现的web端json通信协议
2016/12/29 Python
pytorch 数据集图片显示方法
2018/07/26 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
个人自查自纠材料
2014/10/14 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python