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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
浅谈javascript中的闭包
May 13 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
javascript执行上下文、变量对象实例分析
Apr 25 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&amp;java(一)
2006/10/09 PHP
服务器web工具 php环境下
2010/12/29 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
JavaScript多种图形实现代码实例
2020/06/28 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python中new方法的详解
2019/01/15 Python
python3注册全局热键的实现
2020/03/22 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
redis中lua脚本使用教程
2021/11/01 Redis
Win11更新失败并提示0xc1900101
2022/04/19 数码科技