AngularJS select加载数据选中默认值的方法


Posted in Javascript onFebruary 28, 2018

问题描述:

在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢?

解决方案:

可以用ng-options来动态加载option,然后在用ng-model来匹配。代码如下:

//html
<select ng-model="role_id1" ng-options="o.name for o in list5"></select>
//js
$scope.list5 = [{"id":2,"name":"终端代表"},{"id":3,"name":"片区管理员"},{"id":4,"name":"系统管理员"},{"id":5,"name":"销售市场经理"}]

这样出现了空白选项:

AngularJS select加载数据选中默认值的方法

AngularJS select加载数据选中默认值的方法

那么我们对代码进行简单调整:

<select ng-model="role_id1" ng-options="o.id as o.name for o in list5"></select>

成功了!!

AngularJS select加载数据选中默认值的方法

两者的差别在于:两张图的value是不同的,最开始的value是一个对象,而后面的value是一个id值,这与ng-model的绑定值有直接关系。

以上这篇AngularJS select加载数据选中默认值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jquery实现倒计时功能
Dec 28 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 #Javascript
Vue-Router模式和钩子的用法
Feb 28 #Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 #Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 #Javascript
vue cli 全面解析
Feb 28 #Javascript
js实现动态改变radio状态的方法
Feb 28 #Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python的几种开发工具介绍
2007/03/07 Python
Python类定义和类继承详解
2015/05/08 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
实习医生自我评价
2013/09/22 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年共青团工作总结
2014/12/10 职场文书
教师辞职书范文
2015/02/26 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang