AngularJS - Show/hide based on number of items in an ng-repeat

Question

I have an ng-repeat with 2 filters:

<div class="container">
    <div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
        {{ addresses.name }}
        {{ addresses.number }}
        {{ addresses.email }}
        {{ addresses.contact}}
    </div>
</div>

How can i add an ng-show or ng-hide to the with class="container" to only show this element if the length of items repeated in the ng-repeat is greater than zero?

Answer 1

You need to assign the filter results to a new variable in order to account for the length of the filtered list.

Then you can use the new variable to show/hide the section.

Working Fiddle

<div class="container" ng-show="filtered.length > 0">
    <div ng-repeat-start="addresses 
         in filtered = (Address.Entries 
                          | filter:{IsRegistered: true} 
                          | filterDate:'InfoDetails')">
          {{ addresses.name }}
          {{ addresses.number }}
          {{ addresses.email }}
          {{ addresses.contact}}
     </div>
</div>