ng-table 分页中的序列号答案

【问题标题】：Serial number in ng-table paginationng-table 分页中的序列号
【发布时间】：2017-03-08 12:51:45
【问题描述】：

我需要在我的表中获取序列号。我在 angularjs 中使用 ng-table 来获取分页控件。在表格的第一列中，我使用 {{$index+1}} 来显示序列号。但是当我再次导航到下一页时，序列号从 1 而不是 11 开始。这是我的代码：

HTML

<body ng-app="main">
<div ng-controller="DemoCtrl">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>

    <table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td>{{$index+1}}</td>
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
    </tr>
    </table>
</div>

var app = angular.module('main', ['ngTable']).controller('DemoCtrl', function($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34},
            {name: "Tiancum", age: 43},
            {name: "Steve", age: 27},
            {name: "Adam", age: 29},
            {name: "Mark", age: 34},
            {name: "Ricky", age: 43},
            {name: "Peter", age: 27},
            {name: "Matthew", age: 29},
            {name: "Smith", age: 34}];

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

});

请检查此 plunker 是否存在问题：

https://plnkr.co/edit/PboPRCRb6yelVGCkXSgE?p=preview

【问题讨论】：

标签： angularjs pagination ngtable

【解决方案1】：

您可以使用tableParams 对象。

<tr ng-repeat="user in $data">
    <td>{{ (tableParams.page() - 1) * tableParams.count() + $index + 1 }}</td>
    <td data-title="'Name'">{{user.name}}</td>
    <td data-title="'Age'">{{user.age}}</td>
</tr>

查看更新的 plunker here。

【讨论】：

感谢@Kursad Gulseven 的快速回复:)
不客气。如果有用，请选择它。 ;) meta.stackexchange.com/questions/5234/…

【解决方案2】：

如下修改 index.html 并尝试

 <!DOCTYPE html>
  <html>
    <head>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" />
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<script src="script.js"></script>

</head>
 <body ng-app="main">
  <div ng-controller="DemoCtrl">
       <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>

    <table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
        <td> {{(tableParams.page()-1)*tableParams.count()+$index+1}}</td>
        <td data-title="'Name'">{{user.name}}</td>
        <td data-title="'Age'">{{user.age}}</td>
    </tr>
    </table>
</div>

【讨论】：