AngularJS搜索时子元素无匹配如何隐藏父元素？

嘿，这个需求我之前做项目时也碰到过！现在的问题是搜索后，某些Round下没有匹配的比赛，但Round的标题区块还会显示对吧？咱们可以通过先缓存过滤结果，再判断结果是否为空来控制父元素的显示，直接在模板层面就能搞定。

修改后的代码示例： #

<div class="col-md-6" 
     ng-repeat="round in displaymatch.allrounds"
     ng-init="filteredMatches = (round.matches | filter:namesearch)"
     ng-if="filteredMatches.length > 0">
  <h3>Round: {{round.name}}</h3>
  <div ng-repeat="teamname in filteredMatches">
    <b>Match Date:</b> {{teamname.date}}
    <a ng-href="#!/15/{{teamname.date}}/{{teamname.team1.code}}/{{teamname.team2.code}}">
      {{teamname.team1.name}} <strong>V/S</strong> {{teamname.team2.name}}
    </a>
  </div>
</div>

关键改动说明： #

• 用ng-init缓存过滤结果：把round.matches | filter:namesearch的结果存到filteredMatches变量里，这样既避免了子元素重复执行过滤逻辑（能提升一点性能），又能方便判断结果是否为空。
• ng-if控制父区块显示：给父元素加上ng-if="filteredMatches.length > 0"，只有当该Round下有匹配的比赛时，整个Round区块才会被渲染出来。
• 子元素复用过滤结果：子元素的ng-repeat直接使用filteredMatches，不用再重复写过滤规则，代码更简洁。

如果你的项目更偏向于在控制器层处理逻辑，也可以提前在控制器里计算每个Round的过滤结果，再传到模板里判断，但上面的模板方案已经足够轻量好用啦！

内容的提问来源于stack exchange，提问作者pranav gupta