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