【问题标题】:How to get incremental serial number in Angular table pagination如何在Angular表格分页中获取增量序列号
【发布时间】:2018-01-11 05:38:40
【问题描述】:

我正在使用 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。有什么建议吗?

【问题讨论】:

    标签: javascript jquery angularjs pagination


    【解决方案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']);
    

    我将 jQuery 版本更新为 jsfiddle 中的较新版本 - 现在该应用程序运行良好。

    【讨论】:

    • 非常感谢:-) 它工作正常:-) 你能告诉我,为什么我们不需要添加这个current-page="currentPage" 以及当我们点击页面时$scope.currentPage 是如何自动变化的?
    • @laz current-page 是一个指令属性,其作用类似于 getter 和 setter - github.com/michaelbromley/angularUtils/blob/master/src/…。您可以在控制器$scope.currentPage 中指定一个属性,并使用它来获取和设置当前分页页面。
    猜你喜欢
    • 2016-07-15
    • 2020-11-04
    • 1970-01-01
    • 1970-01-01
    • 2022-08-24
    • 2021-08-22
    • 1970-01-01
    • 2012-03-08
    • 1970-01-01
    相关资源
    最近更新 更多