使用angularjs进行分页，所有页面显示相同的数据

Question

我在 angularjs 应用程序中的实时搜索功能有问题：http://www.monde-du-rat.fr/zombieReport/#/ratousearch

我的工厂正确检索了数据，并显示了第一页，但是当我单击转到下一个或上一个时，过滤器似乎不起作用，数据是相同的。

我的 ctrl

    /* INIT pagination */
    $scope.currentPage = 0;
    $scope.pageSize = 7;

    /* AJAX lordREST QUERY : calling lord watching */
    $scope.change = function() {
        if ($scope.myFormZR_lord.$valid) {

            // RETRIEVE DATAS
            var dataSearch = $scope.myForm_lord.search;
            var dataParam = $scope.myForm_lord.param['value'];

            // CONSOLE LOG CONTROL
            console.log($rootScope.defineCLC + "Search requested with params : " + dataParam  + " : " + dataSearch);

            lordREST.query({search: dataSearch, param: dataParam}, function(response) { 

                // CONSOLE LOG CONTROL
                console.log($rootScope.defineCLC + "number of results : " + response.length);

                /* 1 : test if not empty */
                if (response.length >= 1) {

                    // ng-show things
                    $scope.successLordZR = true;
                        $scope.failLordZR = false;

                    // populate scope
                    $scope.posts = $filter('startFrom')(response, $scope.currentPage*$scope.pageSize);

                    // pagination , calcul of numberOfPages
                    $scope.numberOfPages = function() {
                        return Math.ceil(response.length/$scope.pageSize);                
                    }
                    console.log($rootScope.defineCLC + "number of pages : " + Math.ceil(response.length/$scope.pageSize));

                } else {
                    // 
                }

            });


        } else {
//
        }
    }

和html部分：

            <div id="pagination">
                <div class="myLeft">
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage == 0" ng-hide="posts.length <= 7" ng-click="currentPage = 0">{{ 'TRS_CTRL3_FIRST' | translate }}</button>&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage == 0" ng-click="currentPage = currentPage - 1"><i class="fa fa-arrow-circle-o-left"></i>&nbsp;&nbsp;{{ 'TRS_CTRL3_PREV' | translate }}&nbsp;</button>
                </div>
                <div class="myCenter">
                    {{currentPage+1}}/{{numberOfPages()}}
                </div>
                <div class="myRight">
                    <button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage >= posts.length/pageSize - 1" ng-click="currentPage = currentPage + 1">&nbsp;{{ 'TRS_CTRL3_NEXT' | translate }}&nbsp;&nbsp;<i class="fa fa-arrow-circle-o-right"></i></button>
                    &nbsp;&nbsp;<button type="button" class="btn btn-primary btn-xs" ng-disabled="currentPage >= posts.length/pageSize - 1" ng-hide="posts.length <= 7" ng-click="currentPage = numberOfPages() - 1">{{ 'TRS_CTRL3_LAST' | translate }}</button>
                </div>
            </div>

过滤器：

app.filter('startFrom', function () {
    return function (input, start) {
        if (input === undefined || input === null || input.length === 0) {
            return [];
        } else {
            start = +start; //parse to int
            return input.slice(start);
        }
    }
});

怎么了？您可以在搜索输入中尝试“aria”进行测试并查看控制台。没有错误，所以我认为这是我的分页部分的问题，但 html 或过滤器？

Answer 1

您需要使用 ngRepeat 应用您的 startFrom 过滤器，而不是在获取数据时调用它一次。试试这个：

<li class="list-group-item ng-scope" ng-repeat="post in posts | orderBy:'name' | startFrom:currentPage*pageSize | limitTo:pageSize" ng-if="posts">

改变

$scope.posts = $filter('startFrom')(response, $scope.currentPage*$scope.pageSize);

到

$scope.posts = response;