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 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
如何通过JS实现日历简单算法
Oct 14 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
PHP基础学习小结
2011/04/17 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python插件机制实现详解
2020/05/04 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
八年级英语教学反思
2014/01/09 职场文书
会议主持词
2014/03/17 职场文书
优质服务演讲稿
2014/05/14 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python