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高级程序设计 事件学习笔记
Sep 10 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
详解js的视频和音频采集
Aug 09 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 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无序树实现方法
2015/07/28 PHP
Display SQL Server Version Information
2007/06/21 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
创立科技Java面试题
2015/11/29 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
财产公证书
2014/04/10 职场文书
就业协议书范本
2014/04/11 职场文书
质量安全标语
2014/06/07 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python