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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
Js切换功能的简单方法
2010/11/23 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
志愿者活动总结范文
2014/04/26 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
捐款仪式主持词
2015/07/04 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android