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>

我想显示带有消息的div＆＃34;我们还没有报告用户！＆＃34;有时我们不会有用户报告，所以，我需要显示这个div。

PS *我用过搜索..！

------------编辑：改善问题------------

我没有使用inputFilter来显示列表我会在users中加载包含所有用户的列表，但我只会使用u.reports

在ng-if="u.reports.length>0"内显示包含报告列表的用户

相同的＆＃34;用户＆＃34; list将在另一个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>

过滤列表为空时如何显示div（使用ng-repeat和ng-if过滤）

3 个答案: