如何实现 angularJS 分页答案

【问题标题】：How to implement angularJS Pagination如何实现 angularJS 分页
【发布时间】：2015-12-04 20:17:01
【问题描述】：

我面临分页问题。我尝试了几个答案，包括自定义过滤器和每次不显示数据时。我知道数据已被提取并存在于 DOM 中，但我似乎无法弄清楚为什么它不显示数据。

分页控件：

// pagination controls
    $scope.currentPage = 1;
    $scope.totalItems = $scope.searchDataValues.length;
    $scope.entryLimit = 8; // items per page
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
    $scope.pageChanged    = pageChanged;
    $scope.paginatedList = $scope.searchDataValues.slice(0, $scope.entryLimit);

    function pageChanged(){

        var begin = (($scope.currentPage - 1) * $scope.entryLimit),
            end   = begin + $scope.entryLimit;

        $scope.paginatedList = $scope.searchDataValues.slice(begin, end);

    }

HTML 端代码：

<pagination
           ng-change="pageChanged()"
           total-items="totalItems"
           items-per-page="entryLimit"
           ng-model="currentPage"
           max-size="noOfPages"
           class="pagination-sm"
           boundary-links="true">
</pagination>

Ng-重复过滤器：

<tr ng-repeat="data in searchDataValues | orderBy:sortKey:reverse | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit ">

从过滤器开始：

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

【问题讨论】：

标签： javascript jquery angularjs pagination angularjs-ng-repeat

【解决方案1】：

您可以使用 ui 引导分页指令。我使用的是旧版本，因此语法可能会有所不同。这是example

【讨论】：

【解决方案2】：

只是猜测：您的 pageChanged 函数更改了 $scope.paginatedList，但您的 ng-repeat 绑定到 searchDataValues 而不是 paginatedList。

这可能是您的问题的根源，但这只是一种猜测，因为您没有提供所有代码。

【讨论】：

感谢您的建议，我最终使用了：embed.plnkr.co/eheFSh。但它搞砸了我的排序功能。现在我必须弄清楚如何让他们两个都玩得很好。

【解决方案3】：

对于任何来到这里阅读帖子的人。

我最终使用了这里的代码：http://embed.plnkr.co/eheFSh/

我确实工作了，但它破坏了我的排序功能。我会努力让他们两个一起工作。

【讨论】：