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 相关文章推荐
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
JS实现可控制的进度条
Mar 25 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
在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中日期加减法运算实现代码
2011/12/08 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
js一组验证函数
2008/12/20 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Vue页面骨架屏的实现方法
2018/05/22 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python实现ftp文件传输功能
2020/03/20 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
师德学习感言
2014/01/31 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
工程合作意向书范本
2015/05/09 职场文书
班级联欢会主持词
2015/07/03 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers