Pagination With AngularJS

A pagination script implemented with the AngularJS JavaScript framework and its jqLite subset.

by david_i_smith

HTML

<div data-ng-app="myApp">
	<div data-ng-controller="myAppCtrl">
		<h1>Pagination With AngularJS</h1>
		<article class="page is-hidden" data-ng-unhide="isFirstPage($index)" data-ng-repeat="page in pages" id="p{{$index+1}}">
			<h2 class="title">{{page.title}}</h2>
			<p class="description">{{page.description}}</p>
			<nav class="buttons">
				<a class="button previous-page" data-ng-click="goToPage($index, $event)" data-ng-show="isPreviousPage($index)" href="#">Previous</a>
				<a class="button page-number" data-ng-click="goToPage($index+1, $event)" data-ng-repeat="page in pages" href="#">{{$index+1}}</a>
				<a class="button next-page" data-ng-click="goToPage($index+2, $event)" data-ng-show="isNextPage($index)" href="#">Next</a>
			</nav>
		</article>
	</div>
</div>

CSS

body {
  color:#333;
}
article.page {
	width:600px;
	position:relative;
	height:300px;
}
a.page-number {
	margin:0.5em;
}
nav.buttons {
	position:absolute;
	bottom:0;
	text-align:center;
	width:100%;
}
.is-hidden {
	display:none;
}

JavaScript

var myApp = angular.module('myApp', []);
function myAppCtrl ($scope, $document) {
	var ng, 		// alias for AngularJS
		numPages; 	// number of data records
	ng = angular;
	$scope.pages = [
		{
			title: 'Page 1',
			description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit erat. Nam eleifend metus mauris. Etiam ultrices nulla vel ante bibendum, eget dapibus quam luctus. In a pulvinar mauris, a tempor sapien. Morbi ut ligula a diam mattis tempor sed ut massa. Maecenas vitae sapien lobortis, ultrices quam vel, elementum orci. Fusce sollicitudin malesuada magna ut suscipit. Etiam faucibus ligula elit, quis blandit dolor aliquet in. Suspendisse consectetur nunc at erat blandit, id egestas nunc condimentum. Cras fringilla convallis magna. Suspendisse sit amet enim nec ipsum eleifend tincidunt. Praesent fermentum diam nisl, quis luctus elit auctor faucibus.'
		},
		{
			title: 'Page 2',
			description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit erat. Nam eleifend metus mauris. Etiam ultrices nulla vel ante bibendum, eget dapibus quam luctus. In a pulvinar mauris, a tempor sapien. Morbi ut ligula a diam mattis tempor sed ut massa. Maecenas vitae sapien lobortis, ultrices quam vel, elementum orci. Fusce sollicitudin malesuada magna ut suscipit. Etiam faucibus ligula elit, quis blandit dolor aliquet in. Suspendisse consectetur nunc at erat blandit, id egestas nunc condimentum. Cras fringilla convallis magna. Suspendisse sit amet enim nec ipsum eleifend tincidunt. Praesent fermentum diam nisl, quis luctus elit auctor faucibus.'
		},
		{
			title: 'Page 3',
			description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit erat. Nam eleifend metus mauris. Etiam ultrices nulla vel ante bibendum, eget dapibus quam luctus. In a pulvinar mauris, a tempor sapien. Morbi ut ligula a diam mattis tempor sed ut massa. Maecenas vitae sapien lobortis, ultrices quam vel, elementum orci. Fusce...