Menu
I am using ui-Bootstrap and I am trying to get the pagination working but I seem to be missing something. I have read the documentation and looked at a bunch of plunkers to try and work out how they are specifying which content to paginate but I am having no luck.
Here is what I have done 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>
Controller:
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;
});
889
Add the list items with class name page-items. In addition, as pages likely have more than one such navigation section, So provide a descriptive aria-label for the <nav> to reflect its purpose. To customize the links for each page, just remove “#” and add the desired link.
Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
The . pagination class is used to specify pagination on a list group.
I could simply add the following references:
Your body could look like this:
<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>
Then define the following controller:
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);
});
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
