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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
键盘控制事件应用教程大全
2006/11/24 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python优先队列实现方法示例
2017/09/21 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Django中间件基础用法详解
2019/07/18 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python基于内置函数type创建新类型
2020/10/22 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
小学生自我鉴定
2013/10/12 职场文书
项目专员岗位职责
2013/12/04 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
药品采购员岗位职责
2014/02/08 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
学校运动会报道稿
2014/09/23 职场文书
初中教师个人总结
2015/02/10 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Java使用JMeter进行高并发测试
2021/11/23 Java/Android