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监视范围变量的更改，并在calback中操作应用的其他部分。

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

可能会考虑为$ http请求创建服务并将其移出控制器，然后从控制器内的服务中获取数据

如何使用AngularJS从选择列表中选择值来填充第二个选择列表中的选项

1 个答案: