AngularJS - 如果子循环为空(过滤)，则隐藏父元素

Question

我有一个案例，其中我有嵌套循环，其中子循环由过滤器函数构造，该过滤器函数将父级作为参数。我还有另一个过滤器，它只进行文本比较。这是例子

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

现在，我的问题是当 filter:search应用并过滤掉特定组中的所有结果，我想隐藏该组(而不是留下空的 group.name 没有子元素挂起)。

我没有自己组中的 Material ，所以我在父 ng-repeat 范围中没有这些信息。问题是是否有一种方法可以访问嵌套的 ng-repeat 并从父级查看其计数，如果该计数为 0，则隐藏父级。

更新

这是一个更好地解释这种情况的 fiddle : fiddle

主要问题是我不想将我的 Material 与组相关联。如果没有其他工作，我可以做到这一点，但如果我可以通过检查嵌套循环来做到这一点，这听起来像是一个重载(因为我基本上需要对结果进行两次过滤)。

谢谢

Answer 1

建议使用更清洁的解决方案 HERE .

您需要做的是根据将过滤器应用于数据结构并提取长度的表达式，用 ng-show/ng-if 包裹相关区域。以下是它在您的示例中的工作方式:

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

这允许您在由于过滤而空时隐藏复杂的结构，例如结果表。