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可以填充数据之前先选择A。

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

AngularJS表单有多个http请求

1 个答案: