Displaying list of options based on another select in Angular
I think this will do what you are looking for.. I edited the data to show it working a bit better. I split your data into two arrays, a parent and child.
$scope.parentOptionObjs = [{
id: 1,
name: 'option 1',
desc: ''
}, {
id: 2,
name: 'option 2',
desc: ''
}];
$scope.childOptionObjs = [{
parent: 1,
id: 9,
name: 'option 11',
desc: ''
}, {
parent: 1,
id: 10,
name: 'option 12',
desc: ''
}, {
parent: 1,
id: 11,
name: 'option 13',
desc: ''
}, {
parent: 2,
id: 12,
name: 'option 14',
desc: ''
}, {
parent: 2,
id: 13,
name: 'option 15',
desc: ''
}];
});
The children are now filtered by the id of the parent using the following filter.
app.filter('secondDropdown', function () {
return function (secondSelect, firstSelect) {
var filtered = [];
if (firstSelect === null) {
return filtered;
}
angular.forEach(secondSelect, function (s2) {
if (s2.parent == firstSelect) {
filtered.push(s2);
}
});
return filtered;
};
});
Fiddle