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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
基于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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
document.write的几点使用心得
2014/05/14 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python编程线性回归代码示例
2017/12/07 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python csv模块使用方法代码实例
2019/08/29 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
优秀士兵先进事迹
2014/02/06 职场文书
网络宣传方案
2014/03/15 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
中标通知书
2015/04/17 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书