如何在 Angular JS 中进行分页？答案

【问题标题】：How to do Pagination in Angular JS?如何在 Angular JS 中进行分页？
【发布时间】：2016-01-12 10:16:26
【问题描述】：

我有一个动态数组。我想遍历该数组并为其添加分页。目前，我正在使用 ng-repeat 进行遍历，但是如何使用 ng-repeat 添加分页。请帮我解决这个问题？

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

这很简单。首先确定需要在单个页面上显示多少项。让我们假设为 10；

var resultsPerPage = 10;

现在根据总结果，您可以计算页数。

var noOfPages = Math.ceil(array.length / resultsPerPage);

现在您需要跟踪当前页面。最初它将是 1;

var currentPage = 1;

现在在视图中，您可以通过将 currentPage 与 resultsPerPage 相乘来显示当前页面值

例如，如果您在第 1 页，则需要显示 0 到 9 之间的值。所以您需要做一些这样的事情。

var endIndex = (currentPage * resultsPerPage) - 1;
var startIndex = (currentPage - 1) * resultsPerPage;

希望有帮助！

【讨论】：

【解决方案2】：

如果你需要对ui进行分页，我建议smart table plugin 它易于集成和使用。

【讨论】：

不需要任何插件。您可以使用自己的自定义角度脚本来完成
为什么要重建轮子？如果他想用分页显示一些熟悉的东西（例如表格），那么已经有一种已经制定的指令的基调

【解决方案3】：

使用 ng-repeat，您只能显示来自 $scope 中的变量的数据。

您必须添加另一个系统来查询数据并将它们设置在$scope 中以供 ng-repeat 使用。有很多分页系统，但这是一个小例子：

控制器：

$scope.displayMe = [ .... ] ;
$scope.previous= function(){
   // do your logic to get the good data
   $scope.displayMe = newData ;
}
$scope.next= function(){
   // do your logic to get the good data
   $scope.displayMe = newData ;
}

HTML

<div ng-repeat="data in displayMe"> {{data }} </div>
<button ng-click="previous()"><-- </button>
<button ng-click="next()">--> </button>

【讨论】：

【解决方案4】：

有许多即插即用的分页指令可用。

我正在使用 目录分页。因为这很容易添加到项目中。无需在控制器中进行任何设置或逻辑。

只需添加一个属性，将导航放在您喜欢的任何地方。

This is the link for dir-pagination

【讨论】：

【解决方案5】：

如果您有当前页面和页面中的行数

var params = {
    'page' : 1,
    'count' : 10
};

然后做

data.slice((params.page() - 1) * params.count(), params.page() * params.count());

不过，如果你想建一个表，可以考虑ngTable。

【讨论】：