merch89 merch89 - 5 months ago 16
AngularJS Question

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

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>

Answer

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}}">
Comments