在Angular中的过滤器上隐藏组

时间:2016-06-05 09:00:38

标签: javascript angularjs

我的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}})。通过在quicksearch输入中键入内容来应用过滤器后,长度会发生变化。一切都很好,但我想隐藏“空”的作者;如果你输入“第三”,你就不应再看到荷马辛普森了。

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

1 个答案:

答案 0 :(得分:2)

您可以简单地将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>