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

希望很清楚这里发生了什么。每次> $scalar = 'a single value' # Treat $scalar as a collection: # A scalar as a collection by definition has count 1. > $scalar.Count 1 # Enumerate the scalar in a foreach loop. > foreach ($itm in $scalar) { "[$itm]" } [a single value] # Process the scalar in a pipeline using the ForEach-Object cmdlet. > $scalar | ForEach-Object { "[$_]" } [a single value]表达式触发时，您都会将最近更改的过滤器应用于原始列表，因此这是唯一有效的过滤器。

可能你最好的选择是每次更改都应用所有四个过滤器。这是您可以做到的一种方式：

$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);。如果您已经在手表表达中进行了过滤，那么那些无法做任何有用的事情。

AngularJS $ scope。$ watch on multiple filters

1 个答案: