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 css后面所带参数含义介绍
Aug 18 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
Node.js实现断点续传
Jun 23 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 金额数字转换成英文
2010/05/06 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python实现简单遗传算法
2020/09/18 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
优秀信贷员先进事迹
2014/01/31 职场文书
写求职信有什么意义
2014/02/17 职场文书
基层党员公开承诺书
2014/05/29 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
围城读书笔记
2015/06/26 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Java界面编程实现界面跳转
2022/06/16 Java/Android