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

Question

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

Answer 1

最简单的方法是将 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}}">

Answer 2

见How to display length of filtered ng-repeat data

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

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

Display search result only if a match is found in Angular (Ng-Repeat)

javascript

angularjs

ng-repeat

ng-show

ng-hide