AngularJS窗體與多個http請求

Question

我在我的html窗體中有多個選擇/下拉菜單。每一個都取決於下一個。例如

在我的HTML表單

我有多個選擇：

<td><select ng-model="ASelect" ng-options="a for a in A"></select></td> 
<td><select ng-model="BSelect" ng-options="b for b in B"></select></td> 
<td><select ng-model="CSelect" ng-options="c for c in C"></select></td> 

在我的控制器

我：

$http.get('/getA'). 
    success(function(data) { 
      $scope.A = data; 
     }); 

$http.get('/getB?A=' + $scope.ASelect). 
    success(function(data) { 
      $scope.B = data; 
     }); 

$http.get('/getC?A=' + $scope.ASelect + '&B=' + $ scope.BSelect). 
    success(function(data) { 
      $scope.B = data; 
     }); 

我不知道怎麼辦呢，我需要有一個在B可以填充數據之前首先選擇。

Answer 1

您可以使用$watch打電話給你的函數每當值需要改變，並確保它有一個值，所以當他們選擇沒有或有時網頁加載它不火：

在你的控制器：

$scope.$watch('ASelect', function(aSelect) { 
    if (typeof aSelect != "undefined" && aSelect.length) { 
     $http.get('/getB?A=' + $scope.ASelect).success(function(data) { 
      $scope.B = data; 
     }); 
    } 
}); 

$scope.$watch('BSelect', function(bSelect) { 
    if (typeof bSelect != "undefined" && bSelect.length) { 
     $http.get('/getC?B=' + $scope.ASelect).success(function(data) { 
      $scope.C = data; 
     }); 
    } 
}); 

另一種選擇是ng-change：

<select ng-model="ASelect" ng-options="a for a in A" ng-change="getB()"> 

$scope.getB = function() { 
    $http.get('/getB?A=' + $scope.ASelect).success(function(data) { 
     $scope.B = data; 
    }); 
}