angularjs: cascade dropdown

Question

Я пытаюсь достичь каскадного выпадающего списка в угловом. Я думал, что это будет нормально работать благодаря привязке. См. Ниже:

<select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" required></select> 
<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in selectedRequest.client.departments track by d.id"></select> 

Когда представление загружено, оно работает, я могу видеть отделы, соответствующие тем, которые связаны с клиентом. Однако, когда изменяется выбранныйRequest.client, источник для раскрывающегося списка департамента тоже должен измениться, но вместо этого он становится пустым.

EDIT

Я изменил ребенка раскрывающегося списка:

<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments track by d.id | filter:{clientId: selectedRequest.client.id}"></select> 

, но на этот раз он загружает все отделы в раскрывающемся списке, не обращая внимания на фильтр.

** EDIT 2 **

Переход к:

<select name="client" ng-model="requestService.selectedRequest.client" ng-options="c as c.name for c in clients track by c.id" required></select> 

<select id="department" ng-model="requestService.selectedRequest.department" ng-options="d.defaultLabel for d in departments | filter:{clientId: requestService.selectedRequest.client.id}"></select> 

Теперь источник изменяется правильно при выборе клиента. Однако первоначальный выбор, т. Е. Установка правильного отдела при запуске, не работает. Это потому, что я удалил бит «track by id».

Answer 1

правильный путь был

<select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in departments | filter:{clientId: selectedRequest.client.id} track by d.id "></select> 

это просто, что я не поставил фильтр в нужном месте ... глупая ошибка.

Answer 2

Это может быть, что ваш selectedRequest.clientне относится к тому же объекту в clients массиве. Попробуйте это:

JS:

function testController($scope) { 
      $scope.clients = [ 
      { id: 1, name: "client1", departments: [{ id: 1, defaultLabel: 'department1' }, { id: 2, defaultLabel: 'department2'}] }, 
      { id: 2, name: "client2", departments: [{ id: 3, defaultLabel: 'department3' }, { id: 4, defaultLabel: 'department4'}] } 
      ]; 

      $scope.selectedRequest = {}; 
      $scope.selectedRequest.client = $scope.clients[0];//Assign by object reference. 
     } 

HTML:

<div ng-controller="testController"> 
     <select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients" required></select> 
     <select id="department" ng-model="selectedRequest.department" ng-options="d.defaultLabel for d in selectedRequest.client.departments"></select> 
    </div> 

DEMO

Я удалил track by использовать по умолчанию (трек с помощью ссылки на объект) и убедитесь, что selectedRequest.client относится к объектам внутри clients