AngularJS - hide parent element if children loop is empty (filtered)

angularjs

Solution

A much cleaner solution was suggested HERE.

What you need to do is wrap the relevant area with an ng-show / ng-if based on an expression that applies the filter on the data structure and extracts length. Here is how it works in your example:

  <div ng-show="(materials | filter:filterByGroup(group)).length">
    <div ng-repeat="group in groups">
      {{group.name}}
      <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search ">
        {{material.name}}
      </div>
    </div>
  </div>

This allows you to hide complex structures once they are empty due to filtering, e.g. a table of results.

Problem

I have a case in which I have nested loops in which the child one is constructed by a filter function that takes parent as the argument. I also have another filter that just does a text comparison. Here is the example ``` <div ng-repeat="group in groups"> {{group.name}} <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search "> {{material.name}} </div> </div> ``` Now, my problem is that when `filter:search` is applied and it filters out all the results in specific group, I would like to hide the group (and not leave the empty `group.name` hanging without child elements). I don't have the materials in the group it self, so I don't have that information in the parent ng-repeat scope. The question is if there is a way I can access the nested ng-repeat and see its count from the parent and hide the parent if that count is 0. UPDATE Here is a fiddle that better explains the situation: fiddle The main problem is that I don't want to associate my materials with groups. I could do that if nothing else works, but it sounds like an overload (since I would then need to basically filter the results twice) if I could do it by just checking the nested loop. Thanks

Original source