如何在筛选列表为空时显示div(使用ng-repeat和ng-if进行筛选)

Question

我有一个带ng-repeat的div，用ng-if过滤…它工作得很好…所以我需要做什么，使出现一个div时，列表过滤器返回没有对象??

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>

我想显示一个带有消息"We don ' t have reporting users yet!"的div，有时我们不会有带有报告的用户，所以，我需要显示这个div。

PS*我已经使用了搜索…!

------------ 编辑:改善问题 ------------

我没有使用inputFilter来显示列表包含所有用户的列表将在users中加载，但我将只显示使用ng-if="u.reports.length>0"

在u.reports中具有报告列表的用户

相同的"users"列表将在另一个div中使用，因此我不能过滤所有显示仅报告用户的PS*列表。

------------ 实施解决方案 ------------

我已经创建了一个var来设置计数器，每次迭代递增，每次从列表中删除项时递减。

Answer 1

如果我理解正确，您希望检测列表中所有用户都有没有报告的情况，然后显示一条消息。如果是这种情况，我认为您将需要求助于控制器中的函数，因为ng-if和ng-show具有有限的表达式支持。下面是一个示例，说明如何编写一个简单的函数，如果任何用户至少有一个报告，则返回true;如果所有用户都没有报告，则返回false。然后，您可以使用ng-if中的函数来显示或隐藏消息。我添加了一个按钮，将报告推送给其中一个用户，这样您就可以验证代码是否正确地显示和隐藏了适当的消息。

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>

Answer 2

添加usersFiltered列表并尝试这个:

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

Answer 3

在ng-repeat中设置一个新参数，该参数将具有过滤列表，然后您可以根据您的目的简单地检查该列表!

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

<div ng-if="filterdedUsres.length === 0">
No user found
</div>