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子而没有子元素).

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

UPDATE

这是一个更好地解释情况的小提琴:小提琴

主要问题是我不想将我的材料与群体联系起来.我可以做到这一点,如果没有其他工作,但它听起来像一个重载(因为我需要基本上过滤结果两次),如果我可以通过只检查嵌套循环.

谢谢

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

这允许您在复杂结构由于过滤而为空时隐藏,例如结果表.

Answer 2

我已经看过几次这个用例了,这是我的解决方案:

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

您可以在ng-repeat的范围内使用$ first或$ last来仅显示每个组的第一个和最后一个.如果没有$ first,则不会显示组名.

我刚刚在我的博客上实现了这个并在这里更新了你的小提琴:http://jsfiddle.net/ke793/1/

我不确定这是否是最优雅的解决方案,但它看起来相当简单并且有效.我很想看看其他人如何解决这个问题.

更新:刚刚意识到你可以ng-if用来防止组名在$first元素外面击中dom .比ng-hide/ng-show更清晰,display: none每次都设置为额外的标题.