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

For paging in AngularJS, you can use the below-mentioned way:-

Controller:-

var todos = angular.module('todos', ['ui.bootstrap']); todos.controller('TodoController', function($scope) { 

$scope.filteredTodos = []; 

$scope.itemsPerPage = 30;

$scope.currentPage = 4; 

$scope.makeTodos = function() { 

$scope.todos = []; 

for (i=1;i<=1000;i++) { 

$scope.todos.push({ text:'todo '+i, done:false}); 

 } 

}; 

$scope.figureOutTodosToDisplay = function() {

var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 

var end = begin + $scope.itemsPerPage; 

$scope.filteredTodos = $scope.todos.slice(begin, end); 

}; 

$scope.makeTodos(); 

$scope.figureOutTodosToDisplay(); 

$scope.pageChanged = function() { $scope.figureOutTodosToDisplay(); 

}; 

});

Want to learn Angularjs from scratch! Have a look at this video on Angularjs provided by Intellipaat:

Bootstrap UI component:-

<pagination boundary-links="true" 

max-size="3" 

items-per-page="itemsPerPage" 

total-items="todos.length" 

ng-model="currentPage" ng-change="pageChanged()"></pagination>