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实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
event.srcElement+表格应用
2006/08/29 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
详谈javascript异步编程
2016/02/21 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
Vue渲染函数详解
2017/09/15 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python实现Floyd算法
2018/01/03 Python
Python numpy数组转置与轴变换
2019/11/15 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
保护地球的标语
2014/06/17 职场文书
离婚被告答辩状
2015/05/22 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
初中语文教学研修日志
2015/11/13 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
Java 数组的使用
2022/05/11 Java/Android