javascript - 在 Angular 中隐藏过滤器组

Question

我的 REST API 正在返回分组数据，

{
  "Homer Simpson": [
    {
      "name": "First article",
      "type": "text"
    },
    {
      "name": "Second article",
      "type": "text"
    }
  ],
  "Marge Simpson": [
    {
      "name": "Third article"
      "type": "text
    }
  ]
}

可以过滤文章:

<input type="text" placeholder="Quicksearch" ng-model="quicksearch">
...
<div class="article-group" ng-repeat="(author, articles) in articles">
  <h3>{{author}} ({{filtered.length}})</h3>
  <div class="article" ng-repeat="article in articles | filter: { name: quicksearch } as filtered">

这里重要的是({{filtered.length}})。通过在快速搜索输入中键入内容来应用过滤器后，长度会发生变化。一切正常，但我想隐藏“空”作者；如果您输入“third”，您将不会再看到 Homer Simpson。

在 article-group div 上尝试了 ng-if="filtered.length > 0"，但这不起作用。

Answer 1

您可以简单地将 ng-show="filtered.length" 放在 .article-group 容器上:

<div class="article-group" ng-show="filtered.length" ng-repeat="(author, articles) in articles">
  <h3>{{author}} ({{filtered.length}})</h3>
  <div class="article" ng-repeat="article in articles | filter: { name: quicksearch } as filtered">
    <pre>{{ article | json }}</pre>
  </div>
</div>