AngularJS - 隐藏父元素，如果孩子回路是空的（过滤） [英] AngularJS - hide parent element if children loop is empty (filtered)

问题描述

我有，我有嵌套在子女之一被过滤函数，它的父作为参数构造循环的情况。我也有另外一个过滤器，只是做一个文本比较。这里是例子

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>

现在，我的问题是，当过滤器：搜索应用并筛选出特定组所有的结果，我想隐藏组（而不是离开空 group.name 挂无子元素）。

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).

我没有在组它自身的材料，所以我没有在父NG重复范围的信息。现在的问题是，如果有一种方法可以让我访问嵌套NG重复，看到从父计数和隐藏父如果计数为0。

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.

更新

下面是一个小提琴，更好地解释了情况：小提琴

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.

感谢

推荐答案

一个更清洁的解决方案建议这里。

A much cleaner solution was suggested HERE.

您需要做的就是包装相关区域有多么NG-显示/ NG-如果基于适用上的数据结构和长度提取过滤器的前pression。下面是它如何工作在你的例子：

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.

这篇关于AngularJS - 隐藏父元素，如果孩子回路是空的（过滤）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！