2

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?

Oam Psy
  • 8,555
  • 32
  • 93
  • 157

2 Answers2

4

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>
Malkus
  • 3,686
  • 2
  • 24
  • 39
1

Try to write a separate function which will send back the true/false (which will determine the ng-show) in your controller.

Something like following,

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

Binoy
  • 13
  • 3
  • that function would have to run a filter in controller so how does that help? defeats the purpose of using `filter` in markup – charlietfl Aug 21 '14 at 12:59
  • This word work, just be careful. Angular would continually evaluate this function and if the function is complex it could impact performance. – Malkus Aug 21 '14 at 13:00