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压缩利器
Feb 20 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
javascript中Object使用详解
Jan 26 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使用react render props实现倒计时的示例代码
Dec 06 Javascript
基于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
一个颜色轮换的简单例子
2006/10/09 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JS跨域总结
2012/08/30 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python写入CSV文件的方法
2015/07/08 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python实现事件驱动
2018/11/21 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
高三政治教学反思
2014/02/06 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014年班级工作总结
2014/11/14 职场文书
家长反馈意见及建议
2015/06/03 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书