Angular 中 select指令用法详解


Posted in Javascript onSeptember 29, 2016

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷。查看了很多资料后,发现select指令并不简单,决定总结一下。

select用法:

<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
</select>

  属性说明:

发现并没有ng-change属性

ng-required:当属性值为true时,对select添加required验证,为false时不验证。

ng-options:指定数据源,生成option选项。

  数据源为数组时,用法:

 label for value in array

 select as label for value in array

 label group by group for value in array

 select as label group by groupexpr for value in array track by trackexpr

 数据源为对象时,用法:

 label for (key,value)in object

 select as label for(key,value)in object
label group by group for(key,value)in object
select as label group by groupexpr for (key,value)in object track by trackexpr

 具体说明:

 array/object:数组/对象

 label:option选项显示的名称。

 select:是选中某一项后,绑定到ngModel的值。

value : 数组中的值。

(key,value):对象的key,value。

 group by groupexpr:用于选项分组,

 ng-options与ng-repeat自动生成option选项的区别:

 ng-options生成的option选项选中后,绑定到ngModel的值可以是对象。ng-repeat绑定到ngModel的值只能是字符串。

注意:select初始化时需要为ngModel指定值,否则会出现空白选项。

以上所述是小编给大家介绍的Angular 中 select指令用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
requireJS使用指南
Apr 27 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 #Javascript
js仿小米官网图片轮播特效
Sep 29 #Javascript
基于jquery实现弹幕效果
Sep 29 #Javascript
js获取Get值的方法
Sep 29 #Javascript
js带闹铃功能的倒计时代码
Sep 29 #Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
php empty函数 使用说明
2009/08/10 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
django模板结构优化的方法
2019/02/28 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
选秀节目策划方案
2014/06/06 职场文书
2015元旦标语横幅
2014/12/09 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
详解非极大值抑制算法之Python实现
2021/06/28 Python