這兩天我用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];   
             });

  這樣，問題真的解決了。