angular filter, nested ng-repeat

Question

I am having a problem by doing nested filtering in angular, where the two filter depend on each other.

I would like to do something like this:

<div ng-repeat="g in groups | filter:groupFilter">
  ...
  <tr ng-repeat="c in g.components | filter:componentFilter">
    ...
  </tr>
  ...
</div>

But my problem is the following two restrictions:

If the fist filter matches, i.e. the group filter, then the filter for components should not be applied for components in that in that group.
If no component is found to match the search term for a specific group, then the group should not be matched.

Any bright ideas on how to do something like this? I have tried a number of diffenrent solutions and searched for a solution, but cannot find something close to this.

Edit:

Groups will look something 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": [
        ...
    ] } ... ]

And 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;
       }}  )

So for now, using the suggestion on parsing on parameter, it filters as it should with the exception of removing groups, when it has no components

You can pass parameters to the filter. Check here: [http://stackoverflow.com/questions/11753321/passing-arguments-to-angularjs-filters][1] [1]: http://stackoverflow.com/questions/11753321/passing-arguments-to-angularjs-filters — Bas Slagter, Jun 29 '15 at 09:53
you need custom filter.Please share sample data and groupFilter and componentFilter definations — RIYAJ KHAN, Jun 29 '15 at 11:36

score 0 · Answer 1 · answered Jun 29 '15 at 11:18

You could put your filtered results in a new variable.

 <div ng-repeat="g in filteredGroup = (groups | filter:   groupFilter)">'

And then pass a boolean parameter to your second filter to determine if it should filter. (filteredGroup.length == groups.length)

You can use the same strategy to determine if a group is match by the second filter.

angular filter, nested ng-repeat

1 Answers1