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代码
Oct 19 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
微信小程序加载机制及运行机制图解
Nov 27 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php 无限级 SelectTree 类
2009/05/19 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python 构造三维全零数组的方法
2018/11/12 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python GUI编程完整示例
2019/04/04 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
在职研究生自我鉴定
2013/10/16 职场文书
军训学生自我鉴定
2014/02/12 职场文书
社团活动总结报告
2014/06/27 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
幼儿园辞职信
2015/05/13 职场文书
德能勤绩工作总结
2015/08/11 职场文书