一尘不染

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

angularjs

我有一种情况,在这种情况下,我有嵌套循环,其中子循环是由一个以父作为参数的过滤器函数构造的。我还有另一个过滤器,它只是进行文本比较。这是例子

<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没有子元素的情况下保持空白)。

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

更新

这里是一个小提琴,更好地解释了情况:小提琴

主要问题是我不想将我的资料与小组相关联。如果没有其他办法,我可以这样做,但是如果我仅通过检查嵌套循环就可以做到,这听起来像是一个重载(因为我将需要对结果进行两次基本过滤)。

谢谢


阅读 270

收藏
2020-07-04

共1个答案

一尘不染

您需要做的是根据一个表达式将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>

一旦复杂的结构由于过滤而空了,这可以让您隐藏它们,例如结果表。

2020-07-04