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 预解析
Oct 25 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 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
smtp邮件发送一例
2006/10/09 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
清除div下面的所有标签的方法
2014/02/17 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
python3 map函数和filter函数详解
2019/08/26 Python
python编写猜数字小游戏
2019/10/06 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
寒假家长评语大全
2014/04/16 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS