Geek Answers Handbook

Angularjs: cascade expansion

I am trying to create a cascading Angular drop-down menu. I thought this would work fine thanks to the binding. See below:

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

When the view is loaded, it works, I see departments that correspond to those that are attached to the client. However, whenever the selected Request.client is selected, the source for the department drop-down should also change, but instead it becomes empty.

EDIT

I changed the drop-down list for children:

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

but this time it loads all departments in the drop-down list, ignoring the filter.

** EDIT 2 **

Go to:

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

Now the source changes correctly when the client is selected. However, the initial choice, i.e. Setting the correct department at startup does not work. This is because I removed the "track by id" bit.

+4
2

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

, ... .

+4

, 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

+3

More articles:


All Articles