$index 对于所有使用 dir-paginate 的页面都是固定的

Question

我在我的 Angular 应用程序中使用 dirPaginate 指令进行分页。 它工作正常，但问题是我每页显示 10 条记录，但在每页上 $index 在每页上重复相同的（1-10）。 下一页应该是 11-20,21-30 等等。请帮我解决这个问题。 这是我的代码

<tbody dir-paginate="wagedtl in listWagemasterdtls | orderBy:orderByField:reverseSort | filter : detailsfilter |itemsPerPage:10">
<tr><td class="hidden-xs">{{ wagedtl.wageTypeMstrID}}</td><td>{{wagedtl.wageTypeMstrNm}}</td></tr> 
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true"></dir-pagination-controls>

Answer 1

这就是 dir-paginate 使用的 ng-repeat 的工作原理。我认为应该是 0-9 而不是 1-10。

要计算整个页面的实际索引，您可以使用

current-page

属性将当前页面设置为属性。

<tbody dir-paginate="..." current-page="currentPage">

然后就可以在模板中使用该属性了

$index + currentPage * 10

https://github.com/michaelbromley/angularUtils/blob/master/src/directives/pagination/README.md

Answer 2

我用我的方式解决了。 我通过 dir-pagination-controls 的页面更改事件调用了页面更改函数并发送了“newPageNumber”

<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true" on-page-change='indexCount(newPageNumber)'></dir-pagination-controls> 

在控制器中我在函数中使用了这个逻辑

$scope.indexCount = function(newPageNumber){
    $scope.serial = newPageNumber * 10 - 9;
}

并在html中将'serial'与$index绑定

<td>{{ $index + serial}}</td>

默认情况下 newPageNumber 是未定义的。 所以我只是在控制器的开头保留“serial”的默认值等于 1。

$scope.serial = 1; 可能这不是最好的方法，但我的问题现在解决了......：D

Answer 3

使用 $scope 变量设置 itemsPerPage 的值。

<tr dir-paginate="item in allProductData" itemsPerPage:itemPerPage" > 在

on-page-change

中添加功能

 <dir-pagination-controls max-size="5" on-page-change='indexCount(newPageNumber)'
                                                 direction-links="true"
                                                 boundary-links="true">
 </dir-pagination-controls>

然后在javascript文件中创建这个函数：

$scope.serial = 1;
$scope.itemPerPage=5
$scope.indexCount = function(newPageNumber){
  $scope.serial = newPageNumber * $scope.itemPerPage - ($scope.itemPerPage-1);
}

您可以通过更改

itemsPerPage

 变量来更改 

$scope.itemPerPage

 的值。

仅此而已。现在您将在连续的过程中获得页面索引。