CODEWITHSUNDEEP
angularjs
Alan2
Alan2

Reputation: 24562

How can I make the selection of a value from a select list populate options in a second select list using AngularJS

I am using the following HTML and javascript to populate a select box:

   <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>

This works fine but now I need to have another select list that chooses subjects when a user selects a value from the first select list. I think this is the way I would set up the selects and get the data from the server: 

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

How can I make it so that when the user selects a value from the first select box then it will go to the database and select subjects and populate the second select box.

Upvotes: 0

Views: 544

Answers (1)

charlietfl
charlietfl

Reputation: 171679

You can watch for changes on a scope variable using $watch and manipulate other parts of app within calback.

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

Might consider creating service(s) for $http requests and move them out of controller(s) then get data from service within controller

Upvotes: 1

Related Questions