如何对使用 ng-repeat 生成的表使用 UI Bootstrap 分页答案

【问题标题】：How to use UI Bootstrap Pagination for a table, generated using ng-repeat如何对使用 ng-repeat 生成的表使用 UI Bootstrap 分页
【发布时间】：2016-06-08 12:07:29
【问题描述】：

我正在尝试使用 uib-pagination 在我的 Angular 应用程序中保持分页。我无法找到正确的方法来做到这一点。

HTML

<table id="mytable" class="table table-striped">
  <thead>
    <tr class="table-head">
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in aCandidates">
      <th>
        <div>{{person}}</div>
      </th>
    </tr>
  </tbody>
</table>

控制器

$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;

我可以看到分页栏，但没有对其执行任何操作，即使在将总项目数设为 10 之后，也会呈现整个表格数据。

uib-pagination 的工作原理以及数据（在本例中为 aCandidates）如何与分页相关联。

【问题讨论】：

什么有效，什么无效？请创建一个 jsfiddle。
我尝试在plunker 中生成相同的场景。我需要知道如何在我的应用程序@owca 中添加分页。谢谢

标签： angularjs pagination angular-ui-bootstrap

【解决方案1】：

您缺少的部分是您必须有一个函数来从整个数组中获取当前页面的数据。我添加了一个名为 setPagingData() 的函数来处理这个问题。

你可以在分叉的plunker看到这个

var app = angular.module("plunker", ["ui.bootstrap"]);

app.controller("MainCtrl", function($scope) {
  var allCandidates =
      ["name1", "name2", "name3", "name4", "name5",
       "name6", "name7", "name8", "name9", "name10",
       "name11", "name12", "name13", "name14", "name15",
       "name16", "name17", "name18", "name19", "name20"
      ];

  $scope.totalItems = allCandidates.length;
  $scope.currentPage = 1;
  $scope.itemsPerPage = 5;

  $scope.$watch("currentPage", function() {
    setPagingData($scope.currentPage);
  });

  function setPagingData(page) {
    var pagedData = allCandidates.slice(
      (page - 1) * $scope.itemsPerPage,
      page * $scope.itemsPerPage
    );
    $scope.aCandidates = pagedData;
  }
});

<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table id="mytable" class="table table-striped">
      <thead>
        <tr class="table-head">
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in aCandidates">
          <th>
            <div>{{person}}</div>
          </th>
        </tr>
      </tbody>
    </table>
    <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
  </div>
</div>

【讨论】：

是的，我错过了这个功能，谢谢。我不想使用 $watch，而是使用 ng-click 或 ng-change 在 ui-bootstrap 中编写该函数。但是我最初如何获取数据（在单击或更改事件之前）。
设置 $scope.currentPage =1 后调用 setPagingData($scope.currentPage)
您将使用角度 $http 服务从您的 Web api 检索数据。你可以在这里阅读它docs.angularjs.org/api/ng/service/$http

【解决方案2】：

对于较新的版本，更改为以下代码：

 &lt;ul uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"&gt;&lt;/ul&gt;

不再支持<uib-pagination> 标签。它必须作为属性给出。

【讨论】：

【解决方案3】：

如果你使用Angular-2，你可以试试ngx-bootstrap。它有许多可以与Angular-2集成的引导组件

安装ngx-bootstrap后，试试下面的方法

您的 html 模板 | pagination.html

<div class="row">
  <div class="col-xs-12 col-12">
    <pagination [totalItems]="totalItems" [(ngModel)]="currentPage" [maxSize]="maxSize" class="pagination-sm"
                [boundaryLinks]="true"></pagination>
  </div>
 </div>

您的组件 | 分页组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'demo-pagination',
  templateUrl: './pagination.html'
})
export class DemoPagination {
  maxSize: number = 5;
  totalItems: number = 175;
  currentPage: number = 1;
  numPages: number = 0;

  pageChanged(event: any): void {
    console.log('Page changed to: ' + event.page);
    console.log('Number items per page: ' + event.itemsPerPage);
  }
}

这会像

【讨论】：