Currently, I am in need of a solution to display a specific div when my ng-repeat list is empty. The scenario involves a list containing various types of ice cream (with search filter functionality). What I aim to achieve is showing a designated div when the list does not return any items, even after conducting a search query. For this task, I am utilizing Ionic version 1 with Angular v1.54.
Despite several attempts and scouring through Stackoverflow for similar queries, I have been unable to find a suitable answer that addresses my specific issue. One such attempt involved trying out a suggestion from:
Regrettably, this approach did not yield the desired result.
Here is an excerpt of 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>
Designated div when the list returns no results (even post-filtering/search)
<div class="item" ng-hide="!filteredItems.length == 0">
<p>Er zijn geen ijssoorten gevonden!</p>
</div>
The aforementioned implementation only functions properly when the initial list is devoid of items. Could someone provide assistance with resolving this?