How to do paging in AngularJS?

Question

I have a dataset of about 1000 items in-memory and am attempting to create a pager for this dataset, but I'm not sure on how to do this.

I'm using a custom filter function to filter the results, and that works fine, but somehow I need to get the number of pages out.

Any clues?

Answer 1

Angular UI Bootstrap - Pagination Directive

Check out UI Bootstrap's pagination directive. I ended up using it rather than what is posted here as it has enough features for my current use and has a thorough test spec to accompany it.

View

<!-- table here -->  <pagination    ng-model="currentPage"   total-items="todos.length"   max-size="maxSize"     boundary-links="true"> </pagination>  <!-- items/page select here if you like --> 

Controller

todos.controller("TodoController", function($scope) {    $scope.filteredTodos = []   ,$scope.currentPage = 1   ,$scope.numPerPage = 10   ,$scope.maxSize = 5;    $scope.makeTodos = function() {     $scope.todos = [];     for (i=1;i<=1000;i++) {       $scope.todos.push({ text:"todo "+i, done:false});     }   };   $scope.makeTodos();     $scope.$watch("currentPage + numPerPage", function() {     var begin = (($scope.currentPage - 1) * $scope.numPerPage)     , end = begin + $scope.numPerPage;      $scope.filteredTodos = $scope.todos.slice(begin, end);   }); }); 

I have made a working plunker for reference.

---

Legacy Version:

View

<!-- table here -->  <div data-pagination="" data-num-pages="numPages()"    data-current-page="currentPage" data-max-size="maxSize"     data-boundary-links="true"></div>  <!-- items/page select here if you like --> 

Controller

todos.controller("TodoController", function($scope) {    $scope.filteredTodos = []   ,$scope.currentPage = 1   ,$scope.numPerPage = 10   ,$scope.maxSize = 5;    $scope.makeTodos = function() {     $scope.todos = [];     for (i=1;i<=1000;i++) {       $scope.todos.push({ text:"todo "+i, done:false});     }   };   $scope.makeTodos();     $scope.numPages = function () {     return Math.ceil($scope.todos.length / $scope.numPerPage);   };    $scope.$watch("currentPage + numPerPage", function() {     var begin = (($scope.currentPage - 1) * $scope.numPerPage)     , end = begin + $scope.numPerPage;      $scope.filteredTodos = $scope.todos.slice(begin, end);   }); }); 

I have made a working plunker for reference.

Answer 2

I recently implemented paging for the Built with Angular site. You chan checkout the source: https://github.com/angular/builtwith.angularjs.org

I'd avoid using a filter to separate the pages. You should break up the items into pages within the controller.