我可以简单地添加以下参考：
- bootstrap-css
- angular.js
- angular-ui-bootstrap
您的身体可能看起来像这样：
<html ng-app="friends"> <head>...</head><body> <h4>Paginated Friends</h4> <section ng-controller="contentCtrl"> <div ng-repeat="friend in filteredFriends"> {{friend.name}} </div> <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination> <p> Total items: {{totalItems}}<br /> Items per page: {{itemsPerPage}}<br /> Current Page: {{currentPage}} </p> </section></body></html>然后定义以下控制器：
var app = angular.module('plunker', ['ngResource', 'ui.bootstrap']);app.factory('friendsFactory', function($resource) { return $resource('friends.json');});app.controller('contentCtrl', function ($scope, friendsFactory) { $scope.friends = friendsFactory.query(); $scope.itemsPerPage = 10 $scope.currentPage = 1; // $scope.maxSize = 5; // $scope.bigTotalItems = 175; // $scope.bigCurrentPage = 1; $scope.pageCount = function () { return Math.ceil($scope.friends.length / $scope.itemsPerPage); }; $scope.friends.$promise.then(function () { $scope.totalItems = $scope.friends.length; $scope.$watch('currentPage + itemsPerPage', function() { var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), end = begin + $scope.itemsPerPage; $scope.filteredFriends = $scope.friends.slice(begin, end); }); });});
