详解使用angularjs的ng-options时如何设置默认值(初始值)


Posted in Javascript onJuly 18, 2017

这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己。

1.场景:

就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的。

详解使用angularjs的ng-options时如何设置默认值(初始值)

2.实现:

a.html:

<select ng-model="myselect" ng-options="o for o in options"></select>

b.js:

var url = 'xxxxxx';//该url只是举例,具体的代码要写可用的请求地址。 
$http.post(url). 
       success(functoin(data){ 
        $sope.options=data; //赋值给ng-options    
      });

我当时以为,html写好,动态数据传递给ng-options,这样下拉菜单就可以用了。运行之后也大致正常,只是下拉菜单是空白的,点击之后出现后台传递的数据,就多了第一个的空白项,点击弹出所有的下拉选项,选择要选的选项之后,空白项就又消失了。

详解使用angularjs的ng-options时如何设置默认值(初始值)

查看浏览器中加载好的html发现<select>标签中多了一个非后台传递的option:

<select ng-model="myselect" ng-options="o for o in options"> 
<option value="?"></option> 
<option value="0">--请选择--</option> 
. 
. 
</select>

有点讽刺的是,我去年开发的一个页面中的下拉菜单就遇到过这个问题,当时费了老大功夫才解决,但是怎么解决的竟然忘记了,没办法,我又试了一通ng-init都不行,依然出现空白的选择首先展示出来。

想了一下这个value="?" 有时候是“undefind”应该是ng-model="myselect"的初始值,当后端数据传递过来赋值给options之后(即:$sope.options=data;),angularjs一定是没有覆盖select的原始option,即$scope.myselect=undefind,而是在这个option基础上加上了后端传递过来的data数据,从而导致页面上下拉菜单中多出一个空白的下拉选项。

按照这个思路,又查了一下stackoverflow中的一些说法,我将js改成从为options赋值时就初始化myselect:

var url = 'xxxxxx';//该url只是举例,具体的代码要写可用的请求地址。 
$http.post(url). 
       success(functoin(data){ 
        $scope.options=data; //赋值给ng-options  
        $scope.myselect = $scope.options[0];   
      });

这样,问题真的解决了。 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
浅析vue-router原理
Oct 19 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 #Javascript
JS实现点击Radio动态更新table数据
Jul 18 #Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 #Javascript
ES6学习之变量的两种命名方法示例
Jul 18 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
一些使用频率比较高的php函数
2008/10/03 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php简单实现快速排序的方法
2015/04/04 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
js实现网页收藏功能
2015/12/17 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
React组件refs的使用详解
2018/02/09 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python中获取对象信息的方法
2015/04/27 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
日本无添加化妆品:HABA
2016/08/18 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
运动会通讯稿100字
2014/01/31 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫