欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2021-03-30 09:06:48|栏目:AngularJS|点击:

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

1.场景:

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

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,这样下拉菜单就可以用了。运行之后也大致正常,只是下拉菜单是空白的,点击之后出现后台传递的数据,就多了第一个的空白项,点击弹出所有的下拉选项,选择要选的选项之后,空白项就又消失了。

查看浏览器中加载好的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];   
      }); 

这样,问题真的解决了。 

上一篇:详解ng-alain动态表单SF表单项设置必填和正则校验

栏    目:AngularJS

下一篇:angularjs基础教程

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

本文地址:http://www.codeinn.net/misctech/90857.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有