My goal is to paginate 7 results using a custom pagination tag I created:
<pagination
ng-model="currentPage"
total-items="array.length"
max-size="maxSize"
boundary-links="true">
</pagination>
Below is the code for the controller:
exampleApp.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
$scope.currentPage = 1; // 2 - $watch triggers twice
$scope.numPerPage = 2;
$scope.maxSize = 5;
array = $.map(array, function(value, index) {
return [value];
});
$scope.array = array;
$scope.filteredArray = [];
$scope.order = function(field) {
$scope.reverse = ($scope.field === field) ? !$scope.reverse : false;
$scope.field = field;
};
$scope.field = 'id';
$scope.reverse = false;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
alert(begin + " " + end);
$scope.filteredArray = $scope.array.slice(begin, end);
});
}]);
I'm struggling with understanding how Angular calculates the number of pages. With this setup, I only get 1 page instead of the expected 4 pages.
Another issue is that the $watch function triggers twice when manually setting currentPage to 2 or more. The first time it has the correct values, but the second time it reverts to previous ones resulting in failed pagination.
If anyone has any suggestions on how to solve these issues, please let me know.
EDIT:
var exampleApp = angular.module('exampleApp', ['ui.bootstrap']).config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
exampleApp.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.maxSize = 5;
array = $.map(array, function(value, index) {
return [value];
});
$scope.array = array;
$scope.filteredCreations = [];
$scope.order = function(field) {
$scope.reverse = ($scope.field === field) ? !$scope.reverse : false;
$scope.field = field;
};
$scope.field = 'id';
$scope.reverse = false;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredArray = $scope.array.slice(begin, end);
});
}]);
Partial view:
<div ng-controller="CreationController">
<div class="row" style="text-align: right; margin: 0; padding: 0;">
<pagination
ng-model="currentPage"
total-items="array.length"
max-size="maxSize"
boundary-links="true">
</pagination>
</div>
<div class="foobar accordion" ng-repeat="arr in filteredArray | orderBy : field : reverse">
[[arr.id]]
[[arr.name]]
</div>