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 相关文章推荐
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
JavaScript门道之标准库
May 26 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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(1)
2006/10/09 PHP
PHP产生随机字符串函数
2006/12/06 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php 浮点数比较方法详解
2017/05/05 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python IP地址转整数
2020/11/20 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
教师网络培训感言
2014/03/09 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
工作收入住址证明
2014/10/28 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS