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

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

您缺少的部分是必须具有从整个数组中获取当前页面数据的功能。我添加了一个函数

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://pre.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" >      <thead>        <tr >          <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>