Kaskadowe wybieranie / rozwijanie
Próbuję utworzyć listę rozwijaną połączoną łańcuchowo / kaskadowo (zaznacz elementy) przy użyciu AngularJS, ale mam problem z filtrowaniem i aktualizacją właściwości „wybranych” za pomocą właściwości obiektu.
Po pierwszym załadowaniu strony wybrane elementy są filtrowane i wyświetlane prawidłowo w menu rozwijanych. Po zmianie rozwijanego menu nadrzędnego wybrany element podrzędny nie pobiera pierwszego elementu z listy filtrowanej, co powoduje, że lista rozwijana wnuków nie jest aktualizowana.
Każdy wgląd byłby bardzo mile widziany i zauważ, że mam rozdzielone tablice nadrzędny / podrzędny / wnuczka (a nie w pod macierzach), ponieważ w końcu będę wyciągał moje dane z oddzielnych spocs / tabel w SQL. Jeśli istnieje łatwy sposób na utworzenie sub-tablic w JSON, chciałbym zmienić strukturę danych.
Otolink do zakodowanego przykładu
HTML
<div ng-controller="dropdownCtrl" >
<div>
<select
ng-model="selectedParentItem"
ng-options="p.displayName for p in parentItems">
</select>
</div>
<div>
<select
ng-model="selectedChildItem"
ng-options="c.displayName for c in filteredArray | filter:{parentId:
selectedParentItem.id}">
</select>
</div>
<div>
<select
ng-model="selectedGrandChildItem"
ng-options="g.displayName for g in grandChildItems | filter:{parentId:
selectedChildItem.parentId}">
</select>
</div>
</div>
Kontroler
function dropdownCtrl($scope, filterFilter) {
$scope.parentItems = [
{
"id": 0,
"displayName": "parent 00"
},
{
"id": 1,
"displayName": "parent 01"
},
{
"id": 2,
"displayName": "parent 02"
}
];
$scope.selectedParentItem = $scope.parentItems[0];
$scope.childItems = [
{
"id": 0,
"displayName": "child0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "child1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "child2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "child0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "child1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "child0 of 02",
"parentId": 2
}
];
$scope.filteredArray = [];
$scope.$watch("parentId", function (newValue) {
$scope.filteredArray = filterFilter($scope.childItems, newValue);
$scope.selectedChildItem = $scope.filteredArray[0];
},true);
$scope.grandChildItems = [
{
"id": 0,
"displayName": "grandChild0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "grandChild1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "grandChild2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "grandChild0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "grandChild1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "grandChild0 of 02",
"parentId": 2
}
];
$scope.selectedGrandChildItem = $scope.grandChildItems[0];
}