Fatal编程技术网
  • angularjs/
  • 带多个筛选器的Angularjs中的分页计数未更改

带多个筛选器的Angularjs中的分页计数未更改

angularjs pagination

带多个筛选器的Angularjs中的分页计数未更改,angularjs,pagination,angularjs-ng-repeat,angularjs-filter,Angularjs,Pagination,Angularjs Ng Repeat,Angularjs Filter,我的页面中有多个自定义过滤器以及分页。 过滤工作正常，分页也正常，但分页计数在我过滤数据后不会改变：( 我想我错过了一些东西 我们已经创造了一个假人 我还需要根据文本框中的值过滤数据。但我不知道如何在这个文本框中添加该过滤器 HTML <div class="container"> <div ng-controller="EmpCtrl"> <p><strong> Start: {{startDate | date:

我的页面中有多个自定义过滤器以及分页。 过滤工作正常，分页也正常，但分页计数在我过滤数据后不会改变：(

我想我错过了一些东西

我们已经创造了一个假人

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

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>



开始日期：{startDate}日期：“dd/MM/yyyy”}
结束：{endDate}日期：“dd/MM/yyyy”}






    

  • 
{{record.name}
{{record.bonus}}
{{record.doj}日期：“dd/MM/yyyy”}

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

var-app=angular.module（'myApp'，['ui.bootstrap']）；
应用程序控制器（'EmpCtrl'，函数（$scope）{
$scope.records=[
{“doj”：新日期（“2017/06/29”），“奖金”：250，“姓名”：“a1”}，
{“doj”：新日期（“2017/06/12”），“奖金”：150，“姓名”：“b1”}，
{“doj”：新日期（“2017/05/18”），“奖金”：250，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/03”），“奖金”：150，“姓名”：“d1”}，
{“doj”：新日期（“2017/06/25”），“奖金”：750，“姓名”：“e1”}，
{“doj”：新日期（“2017/06/27”），“奖金”：1500，“姓名”：“a1”}，
{“doj”：新日期（“2017/06/17”），“奖金”：232，“姓名”：“w1”}，
{“doj”：新日期（“2017/08/11”），“奖金”：322，“姓名”：“e1”}，
{“doj”：新日期（“2017/06/21”），“奖金”：455，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/22”），“奖金”：145，“姓名”：“b1”}，
{“doj”：新日期（“2017/05/25”），“奖金”：766，“姓名”：“a1”}，
{“doj”：新日期（“2017/06/28”），“奖金”：150，“姓名”：“a1”}，
{“doj”：新日期（“2017/06/29”），“奖金”：750，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/27”），“奖金”：1500，“姓名”：“b1”}，
{“doj”：新日期（“2017/06/28”），“奖金”：500，“姓名”：“a1”}，
{“doj”：新日期（“2017/08/24”），“奖金”：650，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/27”），“奖金”：1500，“姓名”：“d1”}，
{“doj”：新日期（“2017/06/26”），“奖金”：500，“姓名”：“d1”}，
{“doj”：新日期（“2017/08/13”），“奖金”：650，“姓名”：“w1”}，
{“doj”：新日期（“2017/06/21”），“奖金”：250，“姓名”：“x1”}，
{“doj”：新日期（“2017/06/22”），“奖金”：150，“姓名”：“f1”}，
{“doj”：新日期（“2017/05/15”），“奖金”：250，“姓名”：“f1”}，
{“doj”：新日期（“2017/06/16”），“奖金”：150，“姓名”：“a1”}，
{“doj”：新日期（“2017/06/16”），“奖金”：750，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/17”），“奖金”：1500，“姓名”：“c1”}，
{“doj”：新日期（“2017/06/22”），“奖金”：500，“姓名”：“e1”}，
{“doj”：新日期（“2017/08/13”），“奖金”：650，“姓名”：“d1”}
];
//分页控件
$scope.currentPage=1；
$scope.totalItems=$scope.records.length；
$scope.entryLimit=5；//每页项目数
$scope.noOfPages=Math.ceil（$scope.totalItems/$scope.entryLimit）；
//日期功能
$scope.startDate=moment（）.subtract（6，'d'）。格式（'YYYY-MM-DD'）；
$scope.endDate=moment（）.format（'YYYY-MM-DD'）；
});
app.filter（'startFrom'，函数（）{
返回功能（输入、启动）{
如果（输入）{
开始=+开始；
返回input.slice（开始）；
}
返回[]；
};
});
//ES6-vipin
app.filter（'betweenTrange'，函数（）{
返回函数（项目、开始日期、结束日期）{
返回项目。过滤器（函数（项目）{

return（（item.doj>=moment（startDate））&&（item.doj您需要在不使用分页筛选器的情况下筛选数组，并将此数组用于新的分页长度。（不计算startFrom和limitTo）：

在控制器中，并：


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






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

根据您的需要使用过滤器，如果它仅用于奖金，则：过滤器：{bonus:bonusFilter}

新小提琴：


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