Cascading Highlights / Dropdowns

Question

I am trying to create a drop-down list (selected items) with a chain (select) using AngularJS, but I am having difficulty filtering and updating the "selected" properties with my object properties.

When the page loads first, the selected items are filtered and displayed in the drop-down lists correctly. When I change the drop-down list of the parent item, the child selected item does not capture the first item in the filtered list, as a result of which the grandchildren drop-down list is not updated.

Any understanding will be appreciated with great pleasure, and note that I have parent / child / grandchild arrays separated (and not in subarrays), because in the end I will extract my data from separate documents / tables in SQL. If there is an easy way to create sub-arrays in JSON, I would like to change the data structure.

Here is a link to an encoded example

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> 

controller

 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]; } 

Answer 1

You don't need a watch on this .. its easier than that. Comment on the filter, then change your ng parameter as shown below. note that your last filter looked like it was using the wrong parent id (does the thirddrop bottom box have its parent or grand parent?)

 <select class="form-control" ng-model="selectedParentItem" ng-options="p.displayName for p in parentItems"> </select> <select class="form-control" ng-model="selectedChildItem" ng-options="c.displayName for c in childItems | filter:{parentId: selectedParentItem.id}"> </select> <select class="form-control" ng-model="selectedGrandChildItem" ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}"> </select>