ccschmitz
6/17/2014 - 2:25 AM

Angular Pagination Example

Angular Pagination Example

app.controller('someListController', function($scope) {
  $scope.items = {};
  $scope.page = 0;
  $scope.totalPages = 0;
  $scope.limit = 10;

  Items.query(function(items) {
    $scope.totalPages = Math.ceail($scope.limit / items.count);
    $scope.items = items.splice(0, $scope.limit);
  });

  $scope.getItems = function(pageNumber) {
    var offset = pageNumer * $scope.limit;
    Items.query({ offset: offset, limit: $scope.limit }, function(items) {
      $scope.items = items;
      $scope.page = pageNumber;
    });
  };

  $scope.previousPage = function() {
    $scope.getItems($scope.page - 1);
  };

  $scope.nextPage = function() {
    $scope.getItems($scope.page + 1);
  };
});
<ul class="some-list" ng-controller="someListController">
  <li ng-repeat="item in items">{{item.name}}</li>
</ul>

<ul class="pagination-links">
  <li ng-repeat="page in totalPages">
    <a ng-click="getItems(page)">{{page}}</a>
  </li>
</ul>

<a class="next" ng-click="nextPage()" ng-show="page < totalPages">Next</a>
<a class="next" ng-click="previousPage()" ng-show="page > 0">Previous</a>