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

Question

我正在尝试使用Angular应用程序保持分页uib-pagination。我无法找到执行此操作的正确方法。

的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;

我能够看到分页栏，但是没有执行任何操作，即使将total-items设置为10，也将呈现整个表数据。

uib分页的工作原理以及数据（在这种情况下aCandidates）如何与分页相关联。

Answer 1

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

您可以在分叉的拨蓬中看到这一点

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>