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 相关文章推荐
用户注册常用javascript代码
Aug 29 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
小程序如何构建骨架屏
May 29 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
javascript之ESC(第二类混淆)
2007/05/06 Javascript
Javascript中的数学函数集合
2007/05/08 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
全面了解js中的script标签
2016/07/04 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
详解python中的数据类型和控制流
2019/08/08 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
后进生评语大全
2015/01/04 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript