kumareloaded kumareloaded - 1 year ago 104
AngularJS Question

Pagination with AngularJS?

I've tried pagination with AngularJS but I'm not able to implement certain things, like.

I'm able to navigate through using the 'next' and 'previous' but am not sure how to achieve it by just clicking on that particular 'page number' button. And I also want to add focus to the particular 'page number' button on clicking 'next' and 'previous'

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>

<body ng-app='myApp'>
Hello World
<div ng-controller="MyCtrl">
<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">

<input type="image" src="images/btn_previous.png" alt="previous" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
<button ng-click="currentPage = currentPage">
{{currentPage+1 <= numberOfPages()-2 && currentPage+1 || numberOfPages()-2}}
<button ng-click="currentPage = currentPage">
{{currentPage+2 <= numberOfPages()-1 && currentPage+2 || numberOfPages()-1}}
<button >
{{currentPage+3 <= numberOfPages() && currentPage+3 || numberOfPages()}}
</button> . . .
<button >
<input type="image" src="images/btn_next.png" alt="next" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">



var app=angular.module('myApp', []);

function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 5;
$scope.data = [];
return Math.ceil($scope.data.length/$scope.pageSize);
for (var i=0; i<45; i++) {
$scope.data.push("Item "+i);

app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);

Can someone please help me?

Answer Source

I think you should give try to Pagination Directive

First you need to include the module in your project:

angular.module('myApp', ['angularUtils.directives.dirPagination']);

Then create the paginated content:

dir-paginate="expression | itemsPerPage: (int|expression) [: paginationId (string literal)]"

And finally include the pagination itself.


here is working plunker

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download