angular.js - ng如何根據雙向綁定的值自動向後台發送請求更新頁面？

Question

場景描述：
在page中有一個月份select下拉框，點擊下拉框我們可以對應的月份

<select  ng-model="month"></select>

在controller中，要依照所選的月份去後端取得對應的資料

$scope.$watch($scope.month, function(){
       $http({ url:url,method:'GET',withCredentials:true
            }).success(function(data,header,config,status){
                  // do something
            })
});

我的思考：
假設頁面中有多個下拉框，利用$watch一個個監視$scope變化，很不理想。有沒有思路可以不使用$watch,當ng-model變化時，controller中自動發送http請求獲取資料呢？

求高手指點~

Answer 1

你的$watch寫錯了：

你写成了：    $scope.$watch($scope.month, ...
应该写成：    $scope.$watch('month', ...

下面這種方式也很簡潔：

<select ng-model="year"></select>
<select ng-model="month"></select>
<select ng-model="day"></select>

$scope.changeDo = function(){
    $http({
        url:url,
        method:'GET',
        withCredentials:true
    }).success(function(data,header,config,status){
          // do something
    });
};
$scope.$watch('year', $scope.changeDo);
$scope.$watch('month', $scope.changeDo);
$scope.$watch('day', $scope.changeDo);

如果用 ng-change，可能表現好些。記得把上邊的 $watch() 拿掉：

<select ng-model="year" ng-change="changeDo();"></select>
<select ng-model="month" ng-change="changeDo();"></select>
<select ng-model="day" ng-change="changeDo();"></select>

效能差異基本上可以忽略不計。之前做過類似的測試，執行100萬次，差不了1秒鐘。
如果我來做，會用$watch的方式，後期方便維護（ng-change方式 需要改變 控制器和 模板，watch方式只改動控制器就可以了）。

Answer 2

下拉框這種，一般使用ngChange指令來處理；ngChange

Answer 3

ngChange是最佳選擇，原則上設定盡量少的監聽佇列，否則效率會很低。