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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
javascript排序函数实现数字排序
2015/06/26 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
详解Python中dict与set的使用
2015/08/10 Python
python正则实现提取电话功能
2018/02/24 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python callable内置函数原理解析
2020/03/05 Python
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
上课睡觉检讨书
2014/01/28 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
企业承诺书格式范文
2015/04/28 职场文书
起诉意见书范文
2015/05/19 职场文书
大学运动会加油稿
2015/07/22 职场文书
农贸批发市场管理制度
2015/08/07 职场文书