angularjs select ng-options延遲更新（聯動）

 

在使用angularjs的ng-options時，在后台更改了scope里對應的數組后，前段的select里的option不會馬上更新，而是選擇了某項后才會更新

 

 <label class="item item-input item-select">
    <div class="input-label">
      大類
    </div>
     <select ng-model="selected2" id="test" ng-options="sh.Type1Name for sh in list" ng-change="c2()" >
             <option value="">--請選擇--</option>
     </select>
  </label>
  
  
   <label class="item item-input item-select">
    <div class="input-label">
      小類
    </div>
   
   <select ng-model="selected3" ng-options="x.Type2Name for x in list1">
             <option value="">--請選擇--</option>
        </select>
  </label>

JS

 $scope.list=function(){
     $.ajax({
                        type:"post",
                      contentType: "application/json; charset=utf-8",
                        async:false,
              url:ip+"/Data/List",
                         dataType:"jsonp",
                         jsonp: 'callback',//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback)  
                         data:{},
                       success: function (data) {
                
                      $scope.list = data.list;
                    
                      $scope.c2 = function () {
                      
                          //獲取select對象
                      var myselect = document.getElementById('test');
                      //獲取選中項的索引
                      var index = myselect.selectedIndex; 
                      var json = data.list;
                      var type1id = json[index-1]["Type1Id"];
                      
                      jQuery.ajax({
                          type:"post",
                          contentType: "application/json; charset=utf-8",
                                async:false,
                                url:ip+"/Data/ListType?Type1Id="+type1id,
                                dataType:"jsonp",
                                jsonp:'callback',
                                data:{},
                                success:function(data){
                                    $scope.list1=data.list;
                                    //強制更新
                                    $scope.$apply();
                                }
                               
                      });
                     
                         
                      };

            
                       }
    
    });
 }

JSON后台返回格式

({"list":[{"Type1No":"01","Type1Name":"市政","Type1Id":"6f9619ff-8b86-d011-b42d-00c04fc964ff"},{"Type1No":"02","Type1Name":"消防","Type1Id":"6f9619ff-8b86-d011-b42d-00c08fc964fe"},{"Type1No":"03","Type1Name":"其它","Type1Id":"6f9619ff-8b86-d011-b42d-00c14fc964ff"}]})

 

問題分析

---

其實並不是"在更改了select里的選項后才更新"，而是因為響應了sites事件后的數據更新操作被沒有被視圖得知。因為你的socket實際是個游離在$scope之外的操作，所以雙向綁定在這里沒有生效。

那為什么"在更改select之后"它卻刷新了呢？原因也簡單，因為你這次的操作又重新回到了$scope的生命周期之中，所以雙向綁定監測到了$scope.options的變化。

解決方法超簡單，就是強制通知angular你的數據更新了：

$scope.options = [{name:'aa',id:1},{name:'bb',id:2}];//初始化時候的值
socket.on('sites',function(data){
        $scope.options = data;//socket.io更新該值
        $scope.$apply(); //強制通知
    });

關鍵點

---

 

 $scope.$apply(); 

 //默認第一次加載數據
 $scope.list();