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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
jQuery插件开发汇总
May 15 Javascript
js实现微博发布小功能
Jan 12 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python中线程和进程有何区别
2020/06/17 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
期末自我鉴定
2014/02/02 职场文书
公司承诺书格式
2014/05/21 职场文书
建设工程授权委托书
2014/09/22 职场文书
团组织推荐意见
2015/06/05 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL