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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 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
一个程序下载的管理程序(三)
2006/10/09 PHP
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Python PyQt5整理介绍
2020/04/01 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
幼儿园秋游活动方案
2014/01/21 职场文书
倡议书格式模板
2014/05/13 职场文书
爱国主题班会教案
2015/08/14 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python