AngularJS 필터링 및 제한 목록 길이가 동일한 지 확인하는 방법

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> 

그러나 결과는 여과도 제한 후 요소를 포함 : 여기

내가 지금부터 무엇을 것입니다. limitTo 바로 전에 as results을 이동하면 중단됩니다.

내가 경고가 될 것이다 쇼를 감지하려는 조건 : 제한된 목록의 길이와 필터링 된 목록의 길이가 다른 경우 후 경고을 보여줍니다.

as results 대신 다른 것을 사용해도 괜찮습니다. 그 상태를 감지 할 수있는 방법이 있는지 궁금합니다.

편집 : 문제는 바로 지금은 results.length이 한계를 적용한 후 요소의 양을 제공하는 반면 필자는 필터 바로 뒤, 한도 전의 금액을 제공합니다. 나는 limitTo 문장을 삭제하여이 작업을 수행하는 방법을 알고 있지만, 다음 목록에 너무 많은 결과가 ...

Answer 1

가장 쉬운 방법은 반복을 복제하고 필터링 된 요소를 계산하는 데 사용하는 것입니다 도움이되기를 바랍니다. 처음에는이 작업이 매우 느릴 것이라고 예상했지만 실제로 실행 속도가 매우 놀랍습니다. 실제로는 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 숨겨진 루프 다른 하나가 있습니다. 이 데이터를 사용하여 조건을 작성하기 만하면됩니다.

Answer 2

var newapp = angular.module('someapp',[]); 
 
newapp.service('limitcheck', [function(){ 
 
\t return { 
 
    \t checkLimit : function (arr) { 
 
    \t if (arr.length > 6) { 
 
     \t alert('The array has more than 6 entries'); 
 
     } 
 
    } 
 
    }; 
 
}]); 
 
newapp.filter('dummyfilter',['limitcheck',function(limitcheck){ 
 
\t return function (input) { 
 
    \t //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']; 
 
}]);

<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>

내가 시도하고 서비스를 사용하여 결과를 달성 필터 조합

나는이