How to hide a container when all entries are filtered in angularJS?

Question

I use a filter in my AngularJS 1.4.3 application. What I will do is that if vm.nightServices is filtered an no entry is shown (so all are filtered) than the div container should be hidden. I have tried ng-show="vm.nightServices.length > 0" but it does not work.

<div ng-show="vm.nightServices.length > 0" ng-repeat="nightService in vm.nightServices | filter:institutionOfUserFilter.institutionName">

Answer 1

You can create a new filtered list in your ng-repeat for which you can check the length in your ng-show.

<div ng-repeat="nightService in filtered = ( vm.nightServices | filter:institutionOfUserFilter.institutionName )" ng-show="filtered.length > 0">