网站建设资讯

NEWS

网站建设资讯

怎么使用angularjs的ng-options-创新互联

小编给大家分享一下怎么使用angularjs的ng-options,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联是一家专注于成都做网站、网站建设和托管服务器的网络公司,有着丰富的建站经验和案例。

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

1.场景:

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

怎么使用angularjs的ng-options

2.实现:

a.html:

b.js:

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

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

怎么使用angularjs的ng-options

查看浏览器中加载好的html发现

有点讽刺的是,我去年开发的一个页面中的下拉菜单就遇到过这个问题,当时费了老大功夫才解决,但是怎么解决的竟然忘记了,没办法,我又试了一通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];   
      });

这样,问题真的解决了。

以上是“怎么使用angularjs的ng-options”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:怎么使用angularjs的ng-options-创新互联
网站URL:http://cdweb.net/article/gspcs.html