如何在 angular-ui-bootstrap uib-pagination angularjs 中保持 ng-repeat 的 $index 计数

Question

我正在使用 AngularJS v1.6.6 和 angular-ui-bootstrap 版本：2.5.0 创建分页列表 bui lt 使用 ng-repeat 指令。

分页有效，但每次页面更改 $index 变量计数重新开始，我需要将此值作为函数中的参数传递，例如，如果我点击第二页的第一项，我需要传递值 10.

看到这个fiddle：http://jsfiddle.net/elenat82/vLfLtrxc/

HTML:

<div ng-app="myApp">
<div ng-controller="someController">
<div>list.length = {{list.length}}</div>
<div>currentPage = {{currentPage}}</div>
<div>itemPage = {{itemPage}}</div>
<div>maxSize = {{maxSize}}</div>
<br><br><br><br>
<table>
    <tbody>
        <tr ng-repeat="item in list | pagination:(currentPage-1)*itemPage | limitTo:itemPage track by $index">
            <td>{{ $index +1 }}</td>
            <td>{{ item.task }}</td>
        </tr>
    </tbody>
</table>
<div>
    <ul uib-pagination 
    total-items="list.length" ng-model="currentPage" max-size="maxSize" boundary-links="true" boundary-link-numbers="true" force-ellipses="true" items-per-page="itemPage" first-text="First" last-text="Last" next-text="Next" previous-text="Prev">
    </ul>
</div>

JS:

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('someController', function($scope, $filter) {
$scope.list = [
{task: "task n. 1"},
{task: "task n. 2"},
{task: "task n. 3"},
{task: "task n. 4"},
{task: "task n. 5"},
{task: "task n. 6"},
{task: "task n. 7"},
{task: "task n. 8"},
{task: "task n. 9"},
{task: "task n. 10"},
{task: "task n. 11"},
{task: "task n. 12"},
{task: "task n. 13"},
{task: "task n. 14"},
{task: "task n. 15"},
{task: "task n. 16"},
{task: "task n. 17"},
{task: "task n. 18"},
{task: "task n. 19"},
{task: "task n. 20"}
];

$scope.currentPage = 1;
$scope.itemPage = 5;
$scope.maxSize = 5;

});

app.filter('pagination', function () {
  return function (input, start) {
  start = +start;
    if (input) {
        return input.slice(start);
    }
    else {
        return input;
    }
};
});

Answer 1

您能否尝试在您的代码中进行类似下面的更改，就像您可以在您的示例场景中那样check with this fiddler。

模板：

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

控制器：

  $scope.serial = 1;
  $scope.$watch('currentPage', function(){
    $scope.serial = $scope.currentPage * $scope.itemPage - ($scope.itemPage-1);
  });

Answer 2

遗憾的是，我担心没有内置的方法可以做到这一点。

我会使用一个简单的 indexOf 来检索元素的绝对位置：

<tr ng-repeat="item in list | pagination:(currentPage-1)*itemPage | limitTo:itemPage track by $index">
     <td>{{ list.indexOf(item) + 1 }}</td>
     <td>{{ item.task }}</td>
</tr>

基于您的示例的简单 fiddle：http://jsfiddle.net/zj9c6d52/

Answer 3

这样在DOM中快速计算怎么样？ :

<td>{{ $index +1 + (currentPage-1)*itemPage }}</td>

如何在 angular-ui-bootstrap uib-pagination angularjs 中保持 ng-repeat 的 $index 计数

How to keep ng-repeat's $index count while using angular-ui-bootstrap uib-pagination in angularjs

angularjs

angular-ui-bootstrap