AngularJS Pagination

AngularJS_Pagination

This is a simple example of how you can add pagination to an AngularJS view.

You can see it work here:
https://jsfiddle.net/tinabme/qdp6abg3/18/

script.js

// the interesting part of this is the startFrom filter
angular.module('myApp',[]).filter('startFrom', function(){
    return function(input, start) {
    start = +start;
    return input.slice(start);
    };
});


function  MyCtrl($scope) { // This is just for example. Use whatever the name of your controller is ....
    // This hash is just for example. Use whatever your hash is ...
    $scope.friends = [
      {name:'John', age:25, gender:'boy'},
      {name:'Jessie', age:30, gender:'girl'},
      {name:'Johanna', age:28, gender:'girl'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Peter', age:95, gender:'boy'},
      {name:'Sebastian', age:50, gender:'boy'},
      {name:'Erika', age:27, gender:'girl'},
      {name:'Patrick', age:40, gender:'boy'},
      {name:'Samantha', age:60, gender:'girl'}
    ];
    

    $scope.currentPage = 0;
    $scope.pageSize = 4; // number of lines pre page
    $scope.numberOfPages=function(){
       return Math.ceil($scope.friends.length/$scope.pageSize);                
    }
}

view.htm

<h3>Paging Example</h3>
<div ng:app="myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="f in friends | filter:filter | startFrom:1+currentPage*pageSize | limitTo:pageSize ">{{f.name}} - age:{{f.age}}</li>
        </ul>
        <ul class="list-unstyled"  ng-hide='!friends.length' >
           <p class='margin-left-5'> 
               Page {{currentPage+1}} of {{numberOfPages()}} 
           </p>
            <li>
                <a class='no-line' ng-click='currentPage=currentPage-1' ng-hide='currentPage <= 0'>
                    <i class='fa fa-backward'>&nbsp; Previous</i>
                </a>
                <span ng-hide='currentPage > 0'>
                    <i class='fa fa-backward'>&nbsp; Previous</i>
                </span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span ng-show='currentPage >= numberOfPages()-1'>
                    Next &nbsp;
                    <i class='fa fa-forward'></i>
                </span>
                <a class='no-line' ng-click='currentPage=currentPage+1' ng-hide='currentPage >= numberOfPages()-1'>
                    Next &nbsp;
                    <i class='fa fa-forward'></i>
                </a>
            </li>
        </ul>
    </div>
</div>