怎樣才能讓一個值從選擇列表中選擇使用AngularJS

Question

我使用下面的HTML和JavaScript來填充選擇框填充在第二選擇列表選項：

<select data-ng-model="selectedTestAccount" data-ng-options="item.Id as item.Name for item in testAccounts"> 
     <option value="">Select Account</option> 
    </select> 

    <script type="text/javascript"> 
     angular.module('test', []).controller('TestCtrl', function ($scope, $http) { 
      $scope.selectedTestAccount = null; 
      $scope.testAccounts = []; 

      $http({ 
       method: 'GET', 
       url: '/Admin/Exams/GetTestAccounts', 
       params: { applicationId: 3 } 
      }).success(function (result) { 
       $scope.testAccounts = result; 
      }); 
     }); 
     angular.bootstrap(angular.element("body")[0], ["test"]); 
    </script> 

這工作正常，但現在我需要有另一個選擇列表，當用戶從第一個選擇列表中選擇一個值時選擇主題。我覺得這是我會成立的選擇和從服務器獲取數據的方式：

<select data-ng-model="selectedTestAccount" data-ng-options="item.Id as item.Name for item in testAccounts"> 
     <option value="">Select Account</option> 
    </select> 
    <select data-ng-model="selectedSubject" data-ng-options="item.Id as item.Name for item in subjects"> 
     <option value="">Select Subject</option> 
    </select> 
    ... 
    $http({ 
     method: 'GET', 
     url: '/Admin/GetSubjects', 
     params: { testAccountId: selectedTestAccount } 
    }).success(function (result) { 
     $scope.subjects = result; 
    }); 

我怎樣才能讓這樣，當用戶從第一個選擇框中的值，那麼它會去數據庫 並選擇主題並填充第二個選擇框。

Answer 1

您可以使用$watch觀察範圍變量的更改，並在回調中操作其他應用程序部分。

$scope.$watch('testAccounts', function(){ 
    /* get updated values and update other select "model" on success*/ 
}); 

可能會考慮$ http請求創建服務（S）和他們搬出控制器（S），然後控制器內得到服務數據