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 操作符整理[推荐收藏]
Nov 15 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
JavaScript 判断浏览器是否是IE
Feb 19 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
计数器详细设计
2006/10/09 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
新手学python应该下哪个版本
2020/06/11 Python
python中常见错误及解决方法
2020/06/21 Python
python中温度单位转换的实例方法
2020/12/27 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
大学军训感言600字
2014/02/25 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
田径运动会通讯稿
2014/09/13 职场文书
婚内房产协议书范本
2014/10/02 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python