詳解使用angularjs的ng-options時(shí)如何設(shè)置默認(rèn)值(初始值)

更新時(shí)間：2017年07月18日 14:46:02 作者：to-be-master

本篇文章主要介紹了詳解使用angularjs的ng-options時(shí)如何設(shè)置默認(rèn)值(初始值)，具有一定的參考價(jià)值，有興趣的可以了解一下

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

1.場景：

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

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

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    
      });

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

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

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

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

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

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

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

這樣，問題真的解決了。

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

您可能感興趣的文章: