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

这是一个示例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的过滤内容为空,则不显示它”？

解决方法:

将过滤器的输出分配给变量,然后根据其长度隐藏标题.

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

标签：angularjs,angularjs-ng-repeat,javascript
来源： https://codeday.me/bug/20191121/2055107.html