1

I have an array of orders in my JSON data, on my list page I only wish to display the order beneath if a search match is found, rather than display all the orders, like I currently have in the gif below prior to my search match.

is there an ng-show/hide I can do to hide order prior to search?

Hide Initial Order List

        <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>
me9867
  • 1,519
  • 4
  • 25
  • 53

2 Answers2

1

The simplest way would be to add ng-show='query' to your list or even on the list item, ie:

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

or

<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}}">
dtkaias
  • 781
  • 4
  • 14
0

see How to display length of filtered ng-repeat data

and then do a ng-hide on the ion-list, if the length of the filtered list is greater than 1 than hide...assuming there should only be one?

Community
  • 1
  • 1
johara
  • 111
  • 7
  • Yes, we will only be ever showing 1 order listed beneath when order # is matched, just not wanting to show any orders below before that point. – me9867 Jun 15 '16 at 08:41