4

Angular でカスケード ドロップダウンを実現しようとしています。バインディングのおかげで自然に動くと思いました。下記参照： 

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

ビューが読み込まれると機能し、クライアントにバインドされた部門と一致する部門を確認できます。ただし、 selectedRequest.client が変更されるたびに、部門ドロップダウンのソースも変更されるはずですが、代わりに空になります。

編集

子ドロップダウンを次のように変更しました:

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

ただし、今回はフィルターを無視して、ドロップダウンのすべての部門を読み込みます。

** 編集 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' ビットを削除したためです。

4

2 に答える 2

4

正しい方法は

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

フィルターを正しい場所に置いていなかっただけです...ばかげた間違いです。

于 2013-10-16T18:47:31.877 に答える
3

配列内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>

デモ

track byデフォルト（オブジェクト参照による追跡）を使用するために削除し、selectedRequest.client内部のオブジェクトを参照するようにしましたclients

于 2013-10-11T14:05:02.327 に答える