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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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 危险函数解释 分析
2009/04/22 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
使用Apache的rewrite
2021/03/09 Servers
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
javascript实现点击星星小游戏
2019/12/24 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis