Question

我在Angular App中使用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的页面更改事件调用了页面更改功能，并发送了＆＃39; newPageNumber＆＃39;

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

将“＆＃39;序列号”绑定。使用html中的$ index

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

默认情况下，newPageNumber将是未定义的。所以我只保留了＆＃39; serial＆＃39;的默认值。等于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变量。

这就是全部。现在，您将在连续过程中获得页面索引。

使用dir-paginate为所有页面修复$ index

3 个答案: