如何在Angular表分页中获取增量序列号

Question

我正在使用Angular表格分页。对于每一页，我都有一个从1开始的序号，但我想要连续的页面编号。该怎么办？

<div ng-app="myApp" ng-controller="myController">
    <table id="myData">
        <thead>
            <td>S.no</td>
            <td>Name</td>
            <td>Age</td>
        </thead>
        <tbody>
            <tr dir-paginate="data in details | itemsPerPage:3">
                <td>{{$index+1}}</td>
                <td>{{data.name}}</td>
                <td>{{data.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

完整代码：https://jsfiddle.net/mLvLzzg7/4/

如果我尝试：

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

它返回了null。有什么建议吗？

- laz

Answer 1

计算指数的公式是正确的，但您没有正确初始化变量：

app.controller('myController', function($scope) {
    $scope.itemsPerPage = 3;
    $scope.currentPage  = 1;
    $scope.details = [{
        ...
    }];
}

<tr dir-paginate="data in details | itemsPerPage:itemsPerPage" current-page="currentPage">
    <!-- now you can use itemsPerPage and currentPage to calculate index value -->
    <td>{{($index + 1) + (currentPage - 1) * itemsPerPage}}</td>
</tr>

此外，您的示例代码中未包含 dirPagination 指令：

angular.module('myApp', ['angularUtils.directives.dirPagination']);

我在jsfiddle中将jQuery版本更新到较新的版本，现在应用程序可以正常工作。

- Oleksandr Pyrohov

---

非常感谢，它正常工作了 :-) 请问一下，为什么我们需要添加 current-page="currentPage"，以及当我们点击页面时 $scope.currentPage 如何自动更改？ - laz

@laz current-page 是一个指令属性，它的作用类似于 getter 和 setter - https://github.com/michaelbromley/angularUtils/blob/master/src/directives/pagination/dirPagination.js#L185。您可以在控制器中指定一个属性 $scope.currentPage 并使用它来获取和设置分页的当前页面。 - Oleksandr Pyrohov