仅当在 Angular 中找到匹配项时才显示搜索结果（Ng-Repeat）答案

【问题标题】：Display search result only if a match is found in Angular (Ng-Repeat)仅当在 Angular 中找到匹配项时才显示搜索结果（Ng-Repeat）
【发布时间】：2016-10-16 05:31:48
【问题描述】：

我的 JSON 数据中有一个订单数组，在我的列表页面上，我只想在找到搜索匹配项时显示下方的订单，而不是显示所有订单，就像我目前在下面的 gif 中一样我的搜索匹配。

在搜索之前我可以执行 ng-show/hide 来隐藏订单吗？

        <ion-header-bar class="bar-dark">
    <h2 class="title">Order List</h1>
    </ion-header-bar>
    <div class="bar bar-subheader item-input-inset bar-light">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" ng-model="query" placeholder="Search">
      </label>
    </div>

  <ion-content class="has-subheader">
    <ion-list>
      <ion-item ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap"
      href="#/tab/list/{{order.bkur_user}}">
        <h2>Production Name: {{order.bkav_name}}</h2>
        <h3>Seatcount: {{order.bkur_seatcount}}</h3>
        <h2>Order Subtotal: £{{order.bkur_subtotal}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>

【问题讨论】：

标签： javascript angularjs ng-repeat ng-show ng-hide

【解决方案1】：

见How to display length of filtered ng-repeat data

然后在 ion-list 上执行 ng-hide，如果过滤后的列表的长度大于 1，则隐藏...假设应该只有一个？

【讨论】：

是的，当订单 # 匹配时，我们只会显示下方列出的 1 个订单，只是不想在该点之前显示下方的任何订单。

【解决方案2】：

最简单的方法是将ng-show='query' 添加到您的列表甚至列表项中，即：

<ion-list ng-show='query'>

或

<ion-item ng-show='query' ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap"
      href="#/tab/list/{{order.bkur_user}}">

【讨论】：

添加 ng-show="query" 到 ion-item 已经完成了。非常感谢，答案打勾。 <ion-item ng-show="query" ng-repeat="order in orders | filter:query"...