AngularJS分页 - id计数器从新页面的1开始

时间:2017-02-26 13:48:52

标签: javascript html angularjs

我添加了CustomAction分页,效果很好。 但联系人ID号从新页面的开始开始。我希望它继续增加。

查看(plnkr demo

ui.bootstrap

例如,第一页:

<tr ng-repeat="trainee in trainees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
    <td class="hidden-xs">{{$index+1}}</td>
    <td>{{trainee.name}}</td>
    <td>{{trainee.date | date:'d/M/yyyy'}}</td>
    <td>{{trainee.grade}}</td>
    <td>{{trainee.subject}}</td>
    <td width="180px"><a href="#edit-form"><button type="button" href="#edit-form" class="btn btn-info" ng-disabled="selectedRow !== $index" ng-click="editForm($index,trainee)">Edit</button></a>
        <button type="button" class="btn btn-warning" ng-disabled="selectedRow !== $index" data-toggle="modal" data-target="#myModal" ng-click="traineeDetails(trainee)">Details</button>
    </td>
</tr>

3 个答案:

答案 0 :(得分:1)

在此尝试 - demo fiddle。在控制器内计算这种输出会好得多。此外,通过添加startFrom&amp;,搜索确实可以很好地处理整个对象。 limitTo过滤器。

<tbody>
  <tr ng-class="{'selected':$index == selectedRow}"
      ng-click="setClickedRow($index)"
      ng-repeat="trainee in trainees 
        | filter: search
        | startFrom:(currentPage-1)*itemsPerPage
        | limitTo:itemsPerPage">
    <td class="hidden-xs">{{$index+1 + (itemsPerPage * (currentPage-1))}}</td>
    <td>{{trainee.name}}</td>
    <td>{{trainee.date | date:'d/M/yyyy'}}</td>
    <td>{{trainee.grade}}</td>
    <td>{{trainee.subject}}</td>
    <td width="180px"><a href="#edit-form"><button type="button" href="#edit-form" class="btn btn-info" ng-disabled="selectedRow !== $index" ng-click="editForm($index,trainee)">Edit</button></a>
      <button type="button" class="btn btn-warning" ng-disabled="selectedRow !== $index" data-toggle="modal" data-target="#myModal" ng-click="traineeDetails(trainee)">Details</button>
    </td>
  </tr>
</tbody>

startFrom过滤器

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

答案 1 :(得分:1)

为什么不显示受训者身份?

更新了plnkr:http://plnkr.co/edit/uDVSyN44SE96RlXgRHlN?p=preview

<table class="table table-striped table-bordered table-list">
   <br><br>
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Date</th>
         <th>Grade</th>
         <th>Subject</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr ng-repeat="trainee in trainees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
         <td>{{trainee.id}}</td>
         <td>{{trainee.name}}</td>
         <td>{{trainee.date | date:'d/M/yyyy'}}</td>
         <td>{{trainee.grade}}</td>
         <td>{{trainee.subject}}</td>
         <td width="180px"><a href="#edit-form"><button type="button" href="#edit-form" class="btn btn-info" ng-disabled="selectedRow !== $index" ng-click="editForm($index,trainee)">Edit</button></a>
            <button type="button" class="btn btn-warning" ng-disabled="selectedRow !== $index" data-toggle="modal" data-target="#myModal" ng-click="traineeDetails(trainee)">Details</button>  
         </td>
      </tr>
   </tbody>
</table>

答案 2 :(得分:0)

只需将{{$ index}}替换为

{{$ index + 1 +(FILTER.LIMIT *(CURRENT_PAGE-1))}}

这就是您需要做的,无需添加startFrom和Limit