CODEWITHSUNDEEP
angularjsformsionic-framework
Lydia Ra
Lydia Ra

Reputation: 155

Show Message if results are empty

I have a search form for products. I would like to make sure that it shows me a message when the list is empty, when there is no result.

My code :

<form ng-controller="productCtrl" name="searchForm" ng-submit="searchProduct()" ng-disabled="searchForm.$invalid">
    <input placeholder="Search" type="text" ng-model="form.name" required>
  <ion-list>
    <ion-item ng-repeat="product in list track by $index">{{ product.name }}</ion-item>
  </ion-list>
</form>

thank you :)

Upvotes: 0

Views: 1188

Answers (2)

mazipan
mazipan

Reputation: 183

There's many different answers, like :

  1. Use *ng-if** or ng-show in another element that show empty state message. Check length of list that will shown. If list.length <= 0 show this error.

  2. Add condition too with ng-if or ng-hide in ng-if element. If list.length <=0.

  3. Or you can create Boolean flag in your scope Object, like isShowEmptyState=false and just set true when list was empty

Upvotes: 0

Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

You can use ng-if above the ng-repeat

Like this

<div ng-if="list.length<=0" style="color:red;">Error!</div>

Ex: 

<div ng-app="app">
  <div ng-controller="TodoCtrl">
  <div ng-if="todos.length<=0" style="color:red;">Error!</div>
  <div ng-repeat="item in todos">{{item.color}}</div>
  </div>
</div>

https://jsfiddle.net/vqJ5q/48/

Upvotes: 3

Related Questions