I'm attempting to create a chained/cascading drop-down (select elements) using AngularJS but I'm having difficulty filtering and updating the 'selected' properties with my object properties.
When the page first loads, the selected items are filtered and displaying in the drop-downs properly. Once I change the parent drop-down, the child selected item doesn't grab the first item in the filtered list, causing the grandchild drop-down to not update.
Any insight would be greatly appreciated and note that I have the parent/child/grandchild arrays separated (and not in sub-arrays) because I will eventually be pulling my data from separate spocs/tables in SQL. If there is an easy way to create the sub-arrays in JSON then I'd be willing to change the data structure.
Here's a link to a coded 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];
}
