Question

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

Answer 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;

希望有所帮助！

Answer 2

如果您需要为ui分页，我建议smart table plugin 它易于集成和使用。

Answer 3

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

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

然后做

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

但是，如果要构建表格，请考虑ngTable。

Answer 4

使用ng-repeat只显示$scope中变量的数据。

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

CONTROLLER：

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

Answer 5

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

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

只需添加一个属性，即可随意放入导航栏中。

This is the link for dir-pagination

如何在Angular JS中进行分页？

5 个答案: