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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
这样回答继承可能面试官更满意
Dec 10 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
php字符集转换
2017/01/23 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JS读取XML文件示例代码
2013/11/15 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python yield关键词案例测试
2019/10/15 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
使用python turtle画高达
2020/01/19 Python
Python截图并保存的具体实例
2021/01/14 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
证婚人经典证婚词
2014/01/09 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
消防标语大全
2014/06/07 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
Vue2.0搭建脚手架
2022/03/13 Vue.js