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 缓存策略的BUG的解决方法
Jul 21 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
typescript配置alias的详细步骤
Aug 12 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+javascript的日历控件
2009/11/19 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
详解Document.Cookie
2015/12/25 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
一个简单的python程序实例(通讯录)
2013/11/29 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python 字典与字符串的互转实例
2017/01/13 Python
Python编写登陆接口的方法
2017/07/10 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python os.access()用法实例
2019/02/18 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
机关作风建设心得体会
2014/10/22 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
心理健康教育主题班会
2015/08/13 职场文书
导游词之井冈山
2019/11/20 职场文书