I've encountered an issue with nested filtering in Angular, where two filters are dependent on each other.
What I'm trying to achieve is the following:
<div ng-repeat="g in groups | filter:groupFilter">
...
<tr ng-repeat="c in g.components | filter:componentFilter">
...
</tr>
...
</div>
The problem I'm facing involves two specific constraints:
- If the first filter matches (i.e. the group filter), then the component filter should not be applied to components within that group.
- If no components match the search term for a particular group, then the group itself should not be matched.
Any innovative suggestions on how to approach this? I've experimented with various solutions and searched extensively but haven't found anything similar yet.
Edit:
An example of what groups may look like:
[
{
"group_id": 1,
"order_id": 180,
"title": "Title1",
"priority": 1
},
{
"group_id": 2,
"order_id": 180,
"title": "Title2",
"priority": 2
}
]
And components:
"components": [
{
"component_id": 1,
"order_id": 180,
"group_id": 1,
...,
"materials": [
...
] } ... ]
As for the filter:
<tr ng-repeat="c in g.components | componentFilter: searchTerm:group">
.filter('componentFilter',function(){
return function(components, searchTerm, group){
var term = searchTerm.toLowerCase();
var filtered = [];
angular.forEach(components, function(c){
if((c.description.toLowerCase().indexOf(term) != -1) ||
c.type.toLowerCase().indexOf(term) != -1 ||
group.title.toLowerCase().indexOf(term) != -1){
filtered.push(c);
}
});
return filtered;
}} )
Currently, following the suggestion on parsing parameters, it filters correctly except for the removal of groups without components.