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

时间:2014-04-09 16:50:26

标签: javascript angularjs 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>

问题是:当我搜索时,例如&#34; Item3&#34;,它显示了Category2中的Item3,但仍然是&#34; Category1&#34;即使下面没有任何内容,因为类别未被过滤,只有他们的内容是。

那么我怎么能对AngularJS说:&#34;如果category1的过滤内容为空,则不要显示它&#34; ?

1 个答案:

答案 0 :(得分:3)

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

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