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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Python简单进程锁代码实例
2015/04/27 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python列表操作方法详解
2020/02/09 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
热爱祖国演讲稿
2014/05/04 职场文书
倡议书范文格式
2014/05/12 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
助学贷款贫困证明
2014/09/23 职场文书
公民授权委托书
2014/10/15 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
用人单位聘用意向书
2015/05/11 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书