AngularJS：过滤 ng-repeat 中的子内容

Question

这是一个示例 JSON 代码：

 $scope.info = [{"name":"Category1", "data":[{"name":"Item1"}, {"name":"Item2"}]},
                    {"name":"Category2", "data":[{"name":"Item3"}, {"name":"Item4"}]}];

感谢 ng-repeat，我将其放入列表中，并使用搜索框进行过滤，我还按类别对结果进行排序：

<div ng-repeat="Cat in info">
      <h3>{{Cat.name}}</h3>
      <ul>
          <li ng-repeat="Item in Cat.data | filter:search" >
               {{Item.name}}
          </li>
      </ul>
</div>

问题是：当我搜索时，例如“Item3”，它显示了 Category2 中的 Item3，但即使下面没有任何内容，仍然有“Category1”，因为没有过滤类别，只有它们的内容。

那我怎么对 AngularJS 说：“如果 category1 的过滤内容是空的，就不显示”？

Answer 1

将过滤器的输出分配给一个变量，然后根据它的长度隐藏标题。

<div ng-repeat="Cat in info" ng-hide="filtered.length == 0">
  <h3>{{Cat.name}}</h3>
  <ul>
      <li ng-repeat="Item in filtered = (Cat.data | filter:search)" >
           {{Item.name}}
      </li>
  </ul>
</div>