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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
tensorflow识别自己手写数字
2018/03/14 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python开头的coding设置方法
2019/08/08 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
旅游市场营销方案
2014/03/09 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
导游带团欢迎词
2015/09/30 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS