我正在使用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;
});
我可以简单地添加以下引用：
原文链接：https://www.f2er.com/angularjs/142946.html> 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);
});
});
});
