У меня есть форма в AngularJS, где параметры для одного из выпадающих списков зависят от того, что выбрано в первом.
<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution">
</select>
<input type="text" name="email" ng-model="newUser.email">
<!-- DEPENDENT on what is selected in the previous dropdown -->
<select ng-options="obj.name for obj in organizations track by obj.id" ng-model="newUser.associatedOrg">
</select>
Учреждения загружаются сразу же с базы данных из доступных учреждений в базе данных. Это делается в контроллере следующим образом:
function populate() {
return Institutions.all().then(function (institutions) {
$scope.institutions = institutions;
return institutions;
});
}
// at the end of the controller
populate();
Однако эти "организации" во втором раскрывающемся списке основаны на их родительском настольном учреждении, поэтому мне нужно сделать что-то вроде $scope.organizations = institution.memberOrganizations;
в контроллере после выбора опции из первого выпадающего списка.
Пока что, чтобы убедиться, что все работает, я создал кнопку "Загрузить организации" с помощью ng-click
для этой функции:
$scope.getOrganizationsOnCampus = function(institution) {
$scope.organizations = institution.memberOrganizations;
};
Это работает, однако это очень плохой пользовательский интерфейс.
Поэтому мой вопрос: как мне обновлять $scope.organizations
каждый раз, когда выбран новый институт?
Я хочу сделать это, не слушая DOM - как вы бы в jQuery, потому что я знаю, что это способ против лучших методов AngularJS.
PS Для большей наглядности здесь приведен снимок экрана, а затем нажата кнопка "Загрузить организации", чтобы загрузить дочерние организации выбранного учреждения. Это то, что я хочу автоматически делать каждый раз, когда в предыдущем варианте выбирается другое учреждение.
ДО
ПОСЛЕ
Используете ли вы ng-change
следующим образом:
<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution" ng-change"updateOrg(newUser.institution)">
</select>
а затем в вашем контроллере у вас есть такая функция:
$scope.updateOrg = function(institution) {
$scope.organizations = institution.memberOrganizations;
};