AngularJS $ scope. $ Watch auf mehrere Filter

Question

Ich habe mit keinem Glück basteln, zuerst dachte ich, ich hätte es aber jetzt kann ich nicht die Ergebnisse mehrerer Filter konsistent zu erhalten.

Mein Problem ist, dass, wenn ich einen Filter auf dem Front-End auswähle, der erste, den ich benutze funktioniert, aber wenn ich dann einen zweiten Filter darüber, die filtered.length und die Anzahl der Seiten setzt, aber Die angezeigten Daten sind korrekt. Im Folgenden finden Sie, was in meinem Controller ist

$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); 

Und dann in der Ansicht, habe ich 4 Eingänge bekommt ... eine Suche ist, Dropdown die andere. Wenn ich mehr als einen Filter verwende, wird die Länge nicht aktualisiert.

<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

Hoffentlich, es ist ganz klar, was hier passiert. Jedes Mal, wenn einer Ihrer $watch-Ausdruck ausgelöst wird, wenden Sie den zuletzt geänderten Filter auf die ursprüngliche Liste an, so dass dies der einzige Effekt ist.

Wahrscheinlich sollten Sie alle vier Filter bei jeder Änderung anwenden. Hier ist eine Möglichkeit, dass Sie tun können:

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

Ich bin mir ziemlich sicher, dass Sie sollten auch die | filterA | filterB | filterC | filterD aus Ihrer Sicht entfernen. Wenn Sie Ihren Watch-Ausdruck bereits filtern, können diese nichts Nützliches tun.