這兩天我用ng-options過(guò)程中遇到的初始值為空白的問(wèn)題，記得去年就遇到過(guò)，怎么解決的忘記了，費(fèi)了一陣子功夫之后解決了，想記下來(lái)，方便遇到同樣問(wèn)題的小伙伴當(dāng)然還有自己。

1.場(chǎng)景：

就是做一個(gè)查詢(xún)列表的彈窗，其中有一個(gè)條件需要用到下拉菜單，數(shù)據(jù)是用過(guò)ajax傳遞過(guò)去的。

2.實(shí)現(xiàn)：

a.html:

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

b.js:

var url = 'xxxxxx';//該url只是舉例，具體的代碼要寫(xiě)可用的請(qǐng)求地址。 
$http.post(url). 
       success(functoin(data){ 
        $sope.options=data; //賦值給ng-options    
      }); 

我當(dāng)時(shí)以為，html寫(xiě)好，動(dòng)態(tài)數(shù)據(jù)傳遞給ng-options，這樣下拉菜單就可以用了。運(yùn)行之后也大致正常，只是下拉菜單是空白的，點(diǎn)擊之后出現(xiàn)后臺(tái)傳遞的數(shù)據(jù)，就多了第一個(gè)的空白項(xiàng)，點(diǎn)擊彈出所有的下拉選項(xiàng)，選擇要選的選項(xiàng)之后，空白項(xiàng)就又消失了。

查看瀏覽器中加載好的html發(fā)現(xiàn)<select>標(biāo)簽中多了一個(gè)非后臺(tái)傳遞的option：

 <select ng-model="myselect" ng-options="o for o in options"> 
<option value="?"></option> 
<option value="0">--請(qǐng)選擇--</option> 
. 
. 
</select> 

有點(diǎn)諷刺的是，我去年開(kāi)發(fā)的一個(gè)頁(yè)面中的下拉菜單就遇到過(guò)這個(gè)問(wèn)題，當(dāng)時(shí)費(fèi)了老大功夫才解決，但是怎么解決的竟然忘記了，沒(méi)辦法，我又試了一通ng-init都不行，依然出現(xiàn)空白的選擇首先展示出來(lái)。

想了一下這個(gè)value="?" 有時(shí)候是“undefind”應(yīng)該是ng-model="myselect"的初始值，當(dāng)后端數(shù)據(jù)傳遞過(guò)來(lái)賦值給options之后（即：$sope.options=data;）,angularjs一定是沒(méi)有覆蓋select的原始o(jì)ption，即$scope.myselect=undefind,而是在這個(gè)option基礎(chǔ)上加上了后端傳遞過(guò)來(lái)的data數(shù)據(jù)，從而導(dǎo)致頁(yè)面上下拉菜單中多出一個(gè)空白的下拉選項(xiàng)。

按照這個(gè)思路，又查了一下stackoverflow中的一些說(shuō)法，我將js改成從為options賦值時(shí)就初始化myselect:

var url = 'xxxxxx';//該url只是舉例，具體的代碼要寫(xiě)可用的請(qǐng)求地址。 
$http.post(url). 
       success(functoin(data){ 
        $scope.options=data; //賦值給ng-options  
        $scope.myselect = $scope.options[0];   
      }); 

這樣，問(wèn)題真的解決了。 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論