Angular js client side show more pagination

Angular js providing a very easy way to do client side pagination. Here i am going to explain about simple client side show more pagination using angular js.

I have written the same using Angular 2(+) concept as well - show more/less pagination using Angular 2(+)

View

 
<ul>

<li ng-repeat="datalist in datalists | limitTo: paginationLimit()">

 <div>Name : {{ datalist.name }} Age : {{ datalist.age }}</div> 

 </li>

 </ul> 
        
<div>
 
 <button ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()">
      Show more
 </button>

 </div>
 
 

Controller

 
$scope.datalists = data // json data

//show more functionality

var pagesShown = 1;

var pageSize = 3;

$scope.paginationLimit = function(data) {
 return pageSize * pagesShown;
};

$scope.hasMoreItemsToShow = function() {
 return pagesShown < ($scope.datalists.length / pageSize);
};

$scope.showMoreItems = function() {
 pagesShown = pagesShown + 1;       
}; 

 
 

$scope.datalist is nothing but the json you are getting from backend (Service).We are looping the data into view.

Demo

Play in fiddle

1. Angular js client side pagination like Google

2. Angular js simple client side pagination

Related Posts

1. Angular ng-repeate in directive

2. Loop concept in angular js

3. Filtering concept in angular js

4. Show and Hide in angular

5. Simple client side sorting in angular