AngularJS $ scope。$在多個過濾器上觀察

Question

我一直在擺弄着沒有運氣，起初我以爲我有它，但現在我無法得到多個過濾器的結果保持一致。

我的問題是，當我在前端選擇一個過濾器時，第一個使用的是作品，但是當我選擇第二個過濾器時，過濾的長度和頁數會重置，但顯示的數據是正確的。下面是什麼在我的控制器

$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。如果您已經過濾了您的手錶表情，那麼這些手錶無法做任何有用的事情。