I want to paginate 7 results, this is pagination tag I created to do that:
<pagination
ng-model="currentPage"
total-items="array.length"
max-size="maxSize"
boundary-links="true">
</pagination>
And controller code:
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);
});
}]);
The problem is that I don't know how angular counts the number of pages. In this configuration I get only 1 page, I can't get the correct value of 4 pages.
Also, $watch triggers twice when I manually set currentPage to 2 or more. First time with correct begin/end values, second with previous ones, so it doesn't paginate.
How can I solve this?
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>
