Remove error message at the beginning, show it until the user search stuff (?)

ionic-v1
1

I have I little issue which I got done in a web app, now, I have the same issue on a mobile app but I can’t fix it the same way I did it with web.

Look at this video here

as you can see the user logs in and at the very beginning the 1st thing you will see is a banner “Did not match any search criteria”, and that’s what I want to avoid, that banner has to be displayed only when the filter returns nothing and not at the beginning when the user hasn’t type anything in the search box.

Now, take a look at my code here:

<ion-content>

 <!--search input-->
 <label class="item">
   <input type="search" ng-model="query">
 </label>

 <!--this is the banner-->
 <div ng-show="!sportsFilter.length">
  <i class="icon"> Did not match any search criteria</i>
 </div>

 <!--here is what I am filtering-->
 <div ng-repeat="sport in sportsFilter = (sports | filter:query)"
      ng-show="sport.leagues.length">
 </div>
</ion-content>
2

So like this?

<div ng-show="sportsFilter.length == 0 && query.length">
3

I love you so much, working as expected :smile:

1 Like