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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
Vuex提升学习篇
Jan 11 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP 开源框架22个简单简介
2009/08/24 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
同学会邀请书大全
2014/01/12 职场文书
美术教师岗位职责
2014/03/18 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
入党个人总结范文
2015/03/02 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL