Один ng-options зависит от того, что выбрано в другом - AngularJS

0

У меня есть форма в 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 Для большей наглядности здесь приведен снимок экрана, а затем нажата кнопка "Загрузить организации", чтобы загрузить дочерние организации выбранного учреждения. Это то, что я хочу автоматически делать каждый раз, когда в предыдущем варианте выбирается другое учреждение.

ДО

Изображение 174551

ПОСЛЕ

Изображение 174551

1 ответ

3
Лучший ответ

Используете ли вы 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;
};
  • 1
    Это было так просто! Спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню