Question

我需要在表格中输入序列号。我在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>

JS

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

}）;

请检查这个问题：

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

Answer 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。

Answer 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>

ng-table分页中的序列号

2 个答案: