AngularJS $ scope. 여러 필터의 $ watch

Question

나는 운이 없다고 생각했는데, 처음에 나는 그것을 가지고 있다고 생각했지만 지금은 여러 필터의 결과를 일관되게 유지할 수 없습니다.

제 문제는 프런트 엔드에서 필터를 선택하면 처음 사용하는 필터가 작동하지만 그 위에 두 번째 필터를 선택하면 filtered.length 및 페이지 수가 재설정되지만 표시된 데이터가 정확합니다. 아래는 내 컨트롤러에있는 내용입니다

$scope.list= response.data; 
     var memberList = $scope.list; 

     $scope.currentPage = 1; //current page 
     $scope.maxSize = 5; //pagination max size 
     $scope.entryLimit = 25; //max rows for data table 

     $scope.listLength = memberList.length; 
     $scope.noOfPages = 22; 


     $scope.$watch('filterA', 
      function(term) { 
       $scope.filtered = filterFilter($scope.list, term); 
       $scope.noOfPages = Math.ceil($scope.filtered.length/25); 
       $scope.listLength = $scope.filtered.length; 
     }, true); 
     $scope.$watch('filterB', 
      function(term) { 
       $scope.filtered = filterFilter($scope.list, term); 
       $scope.noOfPages = Math.ceil($scope.filtered.length/25); 
       $scope.listLength = $scope.filtered.length; 
     }, true); 
     $scope.$watch('filterC', 
      function(term) { 
       $scope.filtered = filterFilter($scope.list, term); 
       $scope.noOfPages = Math.ceil($scope.filtered.length/25); 
       $scope.listLength = $scope.filtered.length; 
     }, true); 
     $scope.$watch('filterD', 
      function(term) { 
       $scope.filtered = filterFilter($scope.list, term); 
       $scope.noOfPages = Math.ceil($scope.filtered.length/25); 
       $scope.listLength = $scope.filtered.length; 
     }, true); 

그리고보기에는 4 개의 입력이 있습니다. 두 개 이상의 필터를 사용하면 길이가 업데이트되지 않습니다.

<input type="text" ng-model="filterA"> 
<input type="text" ng-model="filterB"> 
<input type="text" ng-model="filterC"> 
<input type="text" ng-model="filterD"> 

{{filtered.length}} 
<uib-pagination total-items="filtered.length" items-per-page="25" next-text="Next" previous-text="Previous" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" boundary-links="true" num-pages="noOfPages"></uib-pagination> 
<table> 
    <tbody> 
     <tr ng-repeat="post in filtered | filterA | filterB | filterC | filterD | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> 
     <td>{{post.name}}</td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

여기에 무슨 일이 일어나고 있는지 확실히 알 수 있습니다. $watch 표현식 중 하나가 실행될 때마다 가장 최근에 변경된 필터가 원래 목록에 적용되므로 모든 필터가 영향을 미칩니다.

아마도 가장 좋은 방법은 변경 될 때마다 네 개의 필터를 모두 적용하는 것입니다.

function applyFilters() { 
    var filters = ['filterA', 'filterB', 'filterC', 'filterD']; 

    $scope.filtered = filters.reduce(function (l, name) { 
     return filterFilter(l, $scope[name]); 
    }, $scope.list); 
    $scope.noOfPages = Math.ceil($scope.filtered.length/25); 
    $scope.listLength = $scope.filtered.length; 
} 

$scope.$watch('filterA', applyFilters, true); 
$scope.$watch('filterB', applyFilters, true); 
$scope.$watch('filterC', applyFilters, true); 
$scope.$watch('filterD', applyFilters, true); 

당신은 또한 당신의보기에서 | filterA | filterB | filterC | filterD를 제거해야 확실 해요 : 여기에 당신이 할 수있는 한 방법입니다. 시계 식에서 이미 필터링하는 경우 유용하지 않을 수 있습니다.