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拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
Jun 15 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
使用微信SDK自定义分享的方法
2019/07/03 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
简单使用Python自动生成文章
2014/12/25 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python实现用户管理系统
2018/01/10 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
PyQt5响应回车事件的方法
2019/06/25 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
索桥的故事教学反思
2014/02/06 职场文书
公司门卫岗位职责
2014/03/15 职场文书
停电调休通知
2015/04/16 职场文书
工程款申请报告
2015/05/15 职场文书
react 路由Link配置详解
2021/11/11 Javascript
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
MySQL 数据 data 基本操作
2022/05/04 MySQL