Question

我正在尝试显示警告，以防过滤且有限的列表中没有显示元素。我正在寻找一个性能良好的解决方案，因为这些列表真的很长。

以下是我现在所拥有的：

<div class="list_item" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter | limitTo: 6 as results track by $index">
    <label ng-click="$ctrl.handle_list_click()">
        <input type="checkbox" ng-model="item.checked">
        <div class="fake_label" >
            {{item.name}}
        </div>
    </label>
</div>
<div class="list_item too_many"
     ng-repeat-end
     ng-if="results.length > 6">
    <div class="fake_label">
        {{results.length}} matches... Please, filter out.
    </div>
</div>

但结果包含被过滤后的元素，也受到限制。如果我在as results之前移动limitTo，它就会中断。

我要检测的条件会显示警告：如果受限列表的长度和已过滤列表的长度不同，则显示警告。

我不介意使用别的东西，而不是as results，只是想知道是否有办法检测到这种情况。

编辑：现在的问题是results.length在应用限制后给了我元素数量，而我需要的是过滤后的数量，但在限制之前。我知道如何通过删除limitTo句子来做到这一点，但是列表中的结果太多......

Answer 1

＆＃13;

var newapp = angular.module('someapp',[]);
newapp.service('limitcheck', [function(){
	return {
  	checkLimit : function (arr) {
    	if (arr.length > 6) {
      	alert('The array has more than 6 entries');
      }
    }
  };
}]);
newapp.filter('dummyfilter',['limitcheck',function(limitcheck){
	return function (input) {
  	//do your filtering here
    limitcheck.checkLimit(input);
    return input;
  }
}]);
newapp.controller('something', ['$scope',function(scope){
  //This will trigger alert since it contains more than 6 entries
  scope.alist = ['me','you','someone','anyone', 'noone','everyone','villain']; 
  //this will not
  //scope.alist = ['me','you','someone','anyone', 'noone','everyone']; 
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='someapp'>
  <div ng-controller='something'>
    <div ng-repeat='person in alist | dummyfilter | limitTo :6'>
      {{person}}
    </div>
  </div>
</div>

＆＃13;

我尝试使用服务和过滤器组合

来实现结果

我希望这会有所帮助

Answer 2

最简单的方法是复制重复并使用它来计算过滤后的元素。起初，我预计这会很慢，但我对它的运行速度感到惊讶，可能是因为没有太多的DOM操作。

<div class="list_item" ng-if="false" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter as count track by $index">
</div>

<div class="list_item" ng-repeat="item in $ctrl.list | filter: $ctrl.responsiveFilter | limitTo: 6 as results track by $index">
    <label ng-click="$ctrl.handle_list_click()">
        <input type="checkbox" ng-model="item.checked">
        <div class="fake_label" >
            {{item.name}}
        </div>
    </label>
</div>
<div class="list_item too_many"
     ng-repeat-end
     ng-if="count.length > results.length">
    <div class="fake_label">
        {{count.length}} matches... Please, filter out.
    </div>
</div>

通过这种方式，您可以使用ng-if隐藏循环来计算已过滤的元素，并使用另一个循环来计算并绘制有限列表。您所要做的就是使用这些数据创建条件。

如何知道AngularJS过滤和有限列表长度是否相同

2 个答案: