Question

我的页面中有多个自定义过滤器以及分页。过滤有效，分页也是如此，但在我过滤数据后，分页计数不会改变。：（

我想我错过了什么......

创建了一个虚拟JsFiddle

我还需要根据文本框中的值过滤数据。但我不知道如何在此添加该过滤器。

HTML

<div class="container">
    <div ng-controller="EmpCtrl">
    <p><strong>
        Start: {{startDate | date: "dd/MM/yyyy" }} |    
        End: {{endDate | date: "dd/MM/yyyy"}}
    </strong></p>

        <input type="text" ng-model="bonusFilter" placeholder="search" />
        <br><br>
        <ul>
            <li ng-repeat="record in filtered = records | betweenDateRange:startDate:endDate | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">
                <div>
                    <b>{{ record.name }}</b>
                    <b>{{ record.bonus }}</b>
        <span>{{ record.doj | date: "dd/MM/yyyy" }}</span> 
                </div>
            </li>
        </ul>
        <pagination page="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"></pagination>
    </div>
</div>

JS

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('EmpCtrl', function ($scope) {
    $scope.records = [
           {"doj" : new Date("2017/06/29"),"bonus" : 250, "name": "a1"},
           {"doj" : new Date("2017/06/12"),"bonus" : 150, "name": "b1"},
           {"doj" : new Date("2017/05/18"),"bonus" : 250, "name": "c1"},
           {"doj" : new Date("2017/06/03"),"bonus" : 150, "name": "d1"},
           {"doj" : new Date("2017/06/25"),"bonus" : 750, "name": "e1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "a1"},
           {"doj" : new Date("2017/06/17"),"bonus" : 232, "name": "w1"},
           {"doj" : new Date("2017/08/11"),"bonus" : 322, "name": "e1"},
           {"doj" : new Date("2017/06/21"),"bonus" : 455, "name": "c1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 145, "name": "b1"},
           {"doj" : new Date("2017/05/25"),"bonus" : 766, "name": "a1"},
           {"doj" : new Date("2017/06/28"),"bonus" : 150, "name": "a1"},
           {"doj" : new Date("2017/06/29"),"bonus" : 750, "name": "c1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "b1"},
           {"doj" : new Date("2017/06/28"),"bonus" : 500, "name": "a1"},
           {"doj" : new Date("2017/08/24"),"bonus" : 650, "name": "c1"},
           {"doj" : new Date("2017/06/27"),"bonus" : 1500, "name": "d1"},
           {"doj" : new Date("2017/06/26"),"bonus" : 500, "name": "d1"},
           {"doj" : new Date("2017/08/13"),"bonus" : 650, "name": "w1"},
           {"doj" : new Date("2017/06/21"),"bonus" : 250, "name": "x1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 150, "name": "f1"},
           {"doj" : new Date("2017/05/15"),"bonus" : 250, "name": "f1"},
           {"doj" : new Date("2017/06/16"),"bonus" : 150, "name": "a1"},
           {"doj" : new Date("2017/06/16"),"bonus" : 750, "name": "c1"},
           {"doj" : new Date("2017/06/17"),"bonus" : 1500, "name": "c1"},
           {"doj" : new Date("2017/06/22"),"bonus" : 500, "name": "e1"},
           {"doj" : new Date("2017/08/13"),"bonus" : 650, "name": "d1"}
        ];

        // pagination controls
        $scope.currentPage = 1;
        $scope.totalItems = $scope.records.length;
        $scope.entryLimit = 5; // items per page
        $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);

        //Date funtionality
        $scope.startDate = moment().subtract(6,'d').format('YYYY-MM-DD') ;
        $scope.endDate = moment().format('YYYY-MM-DD');

});

app.filter('startFrom', function () {
    return function (input, start) {
        if (input) {
            start = +start;
            return input.slice(start);
        }
        return [];
    };
});

//ES6 - vipin
app.filter('betweenDateRange', function () {
  return function (items, startDate, endDate) {
    return items.filter(function (item) {
      return ((item.doj >= moment(startDate)) && (item.doj <= moment(endDate)));
    });
  };
});

Answer 1

您需要在没有分页过滤器的情况下过滤数组，并将此数组用于新的分页长度。（startFrom和limitTo不计算在内）：

<li ng-repeat="record in filtered = (records | betweenDateRange:startDate:endDate | filter:{bonus: bonusFilter}) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">

这里＆＃34;过滤＆＃34;是新数组并用它来计算新的分页，可能是：

$scope.noOfPages = function(array) {
    $scope.totalItems = array.length;
    return Math.ceil($scope.totalItems / $scope.entryLimit);
}

在您的控制器中：

<pagination page="currentPage" max-size="noOfPages(filtered)" total-items="totalItems" items-per-page="entryLimit"></pagination>

我还需要根据文本框中的值过滤数据。但我不知道如何在此添加该过滤器。

根据你的需要使用过滤器，如果它仅用于奖励那么：filter：{bonus：bonusFilter}

新小提琴：https://jsfiddle.net/kpc1Ldu9/1/

具有多个滤波器的Angularjs中的分页计数不会改变

1 个答案: