我正在使用ui-Bootstrap,我试图让分页工作,但我似乎缺少一些东西.我已经阅读了这些文件,并且看了一堆堆积物,试图弄清楚它们是如何指定分页的内容,但我没有运气.
这是我做了http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview
<section class="main" ng-controller="contentCtrl"> <div ng-repeat="friend in friends"> {{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>
控制器:
angular.module('plunker',['ui.bootstrap']) .controller('contentCtrl',function ($scope) { $scope.friends = [ {'name':'Jack'},{'name':'Tim'},{'name':'Stuart'},{'name':'Richard'},{'name':'Tom'},{'name':'Frank'},{'name':'Ted'},{'name':'Michael'},{'name':'Albert'},{'name':'Tobby'},{'name':'Mick'},{'name':'Nicholas'},{'name':'Jesse'},{'name':'Lex'},{'name':'Robbie'},{'name':'Jake'},{'name':'Levi'},{'name':'Edward'},{'name':'Neil'},{'name':'Hugh'},{'name':'Hugo'},{'name':'Yanick'},{'name':'Matt'},{'name':'Andrew'},{'name':'Charles'},{'name':'Oliver'},{'name':'Robin'},{'name':'Harry'},{'name':'James'},{'name':'Kelvin'},{'name':'David'},{'name':'Paul'} ]; $scope.totalItems = 64; $scope.itemsPerPage = 10 $scope.currentPage = 1; $scope.setPage = function (pageNo) { $scope.currentPage = pageNo; }; $scope.pageChanged = function() { console.log('Page changed to: ' + $scope.currentPage); }; $scope.maxSize = 5; $scope.bigTotalItems = 175; $scope.bigCurrentPage = 1; });
我可以简单地添加以下引用:
> bootstrap-css
> angular.js
> angular-ui-bootstrap
你的身体可能看起来像这样:
<html ng-app="friends"> <head> ... </head> <body> <h4>Paginated Friends</h4> <section class="main" 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); }); }); });