Helcio Macedo Helcio Macedo - 3 months ago 7
AngularJS Question

How to show a div when a filtered list is empty (Filtered using ng-repeat with ng-if)

I have a div with ng-repeat, filtered with ng-if.. Its works fine.. so what i need to do to make appear a div when list filter returns no objects??

The div

<div class="item listItem active" ng-repeat="u in users | filter: inputFilter" ng-if="u.reports.length>0">
Name: {{u.name}}
Reports: {{u.reports.length}}
</div>


I want to show a div with a message "We dont have reported users yet!" sometimes we will not have users with reports, so, i need to show this div.

PS* I have used the search..!

------------ EDIT: Improving the Question ------------

Im not using the inputFilter to show the list
A list with all users will be loaded in
users
but i will show only the users with a report list inside
u.reports
using
ng-if="u.reports.length>0"


The same "users" list will be used in another div, so i cant filter all the PS* list showing just reported users.

------------ IMPLEMENTED SOLUTION ------------

I have created a var to set a counter, incrementing by every iteration and decremented every time when i remove an item from the list.

Lex Lex
Answer

If I'm understanding correctly, you want to detect the condition where all users in your list have no reports and then display a message. If that is the case I think you are going to need to resort to a function in your controller because ng-if and ng-show have limited expression support. Here is a sample of how you could write a simple function that returns true if any of the users have at least one report and false if all of the users have zero reports. Then you can use the function in your ng-if to show or hide the message. I added a button that will push a report onto one of the users so you can verify that the code is properly showing and hiding the message as appropriate.

angular.module('app', [])
  .controller('ctrl', function($scope, $filter) {
    $scope.users = [{
      name: 'Adam',
      reports: []
    }, {
      name: 'Alan',
      reports: []
    }, {
      name: 'Allen',
      reports: []
    }, {
      name: 'Amy',
      reports: []
    }, {
      name: 'Andrea',
      reports: []
    }];

    $scope.noUsersWithReports = function() {
      var usersWithReports = $filter('filter')($scope.users, {
        reports: []
      });
      return usersWithReports.length === 0;
    }

    $scope.reportUser = function(user) {
      $scope.users[$scope.users.indexOf(user)].reports.push({
        name: 'Fake Report'
      });
    }
    
    $scope.clearReports = function() {
      angular.forEach($scope.users, function(user) {
        user.reports = [];
      });
    }
  });
div {
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <button ng-repeat="u in users" ng-click="reportUser(u)">Report {{u.name}}</button>
    <button ng-click="clearReports()">Clear All Reports</button>
  </div>
  <div>
    Filter:
    <input type="text" ng-model="listFilter">
  </div>
  <div ng-repeat="u in users | filter: listFilter as filteredList" ng-if="u.reports.length > 0">
    Name: {{u.name}}
    <br/>Reports: {{u.reports.length}}
  </div>
  <div ng-if="noUsersWithReports()">
    We don't have reported users yet!
  </div>
</div>