Pagination Controller & Factory
An angular controller and factory showing pagination
by Mark
HTML
<script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<link rel="stylesheet" href=" http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div data-ng-controller="myController">
<table class="table table-striped table-bordered table-hovertable-hover">
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li data-ng-class="{disabled: isPrevDisabled}">
<a data-ng-click="prev()">«</a>
</li>
<li data-ng-repeat="page in pages" ng-class="{active: current===page}">
<a data-ng-click="goto(page)">{{page}}</a>
</li>
<li data-ng-class="{disabled: isNextDisabled}">
<a data-ng-click="next()">»</a>
</li>
</ul>
</div>
JavaScript
/*****************************************************************
* ANGULAR APPLICATION
******************************************************************/
window.myApp = angular.module('myApp', []);
/*****************************************************************
* ANGULAR EXPOSED ITEM SERVICE
******************************************************************/
window.myApp
.factory('ItemService', [
function () {
var _total = 30;
return {
get: function (start, limit) {
var _i, _items = new Array();
for (_i = start; _i < start + limit; _i += 1) {
_items.push({ id: _i, name: 'item ' + _i });
}
return {
items: _items,
start: start,
limit: limit,
total: _total
};
},
initalValues: function () {
return {
start: 1,
limit: 5,
total: _total
};
}
};
}
]);
/*****************************************************************
* ANGULAR EXPOSED MY APPLICATION CONTROLLER
******************************************************************/
window.myApp
.controller('myController', [
'$scope', 'ItemService',
function ($scope, itemService) {
var _initalValues = itemService.initalValues(),
_lastPage = Math.ceil(_initalValues.total / _initalValues.limit),
_pagesArray = function (maxPages) {
var _arr = new Array(),
_i;
for (_i = 1; _i <= maxPages; _i += 1) {
_arr.push(_i);
}
return _arr;
},
_updateItems...