My current HTML and javascript code is used to fill a select box dynamically using AngularJS:
<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>
Although this works well, I now need to implement another select list to choose subjects based on the user's selection from the first select list. I plan to set up the selects and fetch data from the server like this:
<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;
});
I'm seeking advice on how to make it so that when a user chooses an option from the first select box, it triggers a database query to retrieve and populate subjects in the second select box.