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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP学习之PHP变量
2006/10/09 PHP
PHP基础知识介绍
2013/09/17 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
微信小程序自定义组件
2017/08/16 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python sys.path详细介绍
2013/10/17 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
应届毕业生求职自荐书
2014/01/03 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
装修协议书范本
2014/04/21 职场文书
新闻传播专业求职信
2014/07/22 职场文书
员工开除通知书
2015/04/25 职场文书
居委会工作总结2015
2015/05/18 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
springboot用户数据修改的详细实现
2022/04/06 Java/Android