-1

I am searching for a solution for showing a div when mine ng-repeat list is empty. I have created a list (with search filter) with different ice creams. I would like to show a div when the list is not showing any items, even when I did a search query. I am using ionic version 1 with angular v1.54.

I've tried different things and searched on Stackoverflow for questions like this. Unfortunately the answers doesn't help me any further. As example I've tried the following answer

https://stackoverflow.com/a/32960240/5503094

But that doesn't seem to work.

My code

ng-repeat

  <ion-item ng-repeat="item in icecreams | filter: query as filteredItems" class="item-thumbnail-left item-text-wrap repeated-item" href="#" ng-if="item.beschikbaar == 'Ja'">
      <img src="http://placehold.it/100x100">
      <h2>{{ item.name }}</h2>
      <p>{{ item.info | limitTo: 100 }}{{item.info.length > 100 ? '...' : ''}}</p>
      <h4>{{ item.type }}</h4>
      <h4>In de winkel tot: {{ item.end_date }}</h4>
  </ion-item>

div to show when the list is empty (even with filtering/searching)

  <div class="item" ng-hide="!filteredItems.length == 0">
    <p>Er zijn geen ijssoorten gevonden!</p>
  </div>

This only works when the list is empty from the begin. Can someone help me out?

Giesburts
  • 6,879
  • 15
  • 48
  • 85

1 Answers1

3

Try checking if filteredItems exists also

<div class="item" ng-hide="filteredItems && filteredItems.length">
    <p>Er zijn geen ijssoorten gevonden!</p>
</div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150