\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a: <\/p>\n
<idf-pagination data="paginate"><\/idf-pagination> <\/code><\/pre>\n \u0433\u0434\u0435 paginate \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0438\u0434\u0430 <\/p>\n
$scope.paginate = { per_page: 10, total: null, page: 1 }; <\/code><\/pre>\n \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f $scope.paginate.page, \u043d\u0430 \u043d\u0435\u0433\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u043b\u0438\u0441\u0442\u043d\u0435\u0440 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n
$scope.$watch("paginate", function(data, oldData){ if(data.page == oldData.page) return; reloadData(); }, true); <\/code><\/pre>\n \u041f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0430 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 total \u0438 \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e 1 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.
<\/a>
\u041b\u0438\u0441\u0442\u0438\u043d\u0433 \u043c\u043e\u0434\u0443\u043b\u044f idf-pagination.js <\/p>\nangular.module('idfPagination', []).directive('idfPagination', [function() { return { restrict: 'E', scope: { data: '=', change: '=' }, template: '<div class="row" ng-if="data.total && data.total > data.per_page">' + ' <div class="col-sm-5 animated-panel">' + ' <div class="dataTables_info">' + ' Showing {{(data.page - 1) * data.per_page + 1}} to {{max()}} of {{data.total}} entries' + ' <\/div>' + ' <\/div>' + ' <div class="col-sm-7 animated-panel" ng-if="data.total > data.per_page">' + ' <div class="paging_simple_numbers pull-right">' + ' <ul class="pagination no-margins">' + ' <li class="paginate_button previous" ng-class="{disabled: data.page <= 1}">' + ' <a class="pointer" ng-click="setPage(data.page - 1)">Previous<\/a>' + ' <\/li>' + ' <li class="paginate_button" ng-repeat="num in pagesArray track by $index" ng-class="{active: $index + 1 == data.page}">' + ' <a class="pointer" ng-click="setPage($index + 1)">{{$index + 1}}<\/a>' + ' <\/li>' + ' <li class="paginate_button next" ng-class="{disabled: data.page >= numPages}">' + ' <a class="pointer" ng-click="setPage(data.page + 1)">Next<\/a>' + ' <\/li>' + ' <\/ul>' + ' <\/div>' + ' <\/div>' + '<\/div>', controller: function($scope){ $scope.$watch("data", function(data, oldData){ if(data.total == oldData.total) return; $scope.numPages = Math.ceil($scope.data.total \/ $scope.data.per_page); $scope.pagesArray = []; for(var num = 0; num < $scope.numPages; num++){ $scope.pagesArray.push(num); } }, true); $scope.max = function(){ var max = $scope.data.page * $scope.data.per_page; return max < $scope.data.total ? max : $scope.data.total; }; $scope.setPage = function(page){ if(page < 1 || page > $scope.numPages || page == $scope.data.page) return; $scope.data.page = page; }; } }; }]); <\/code><\/pre>\n \u0415\u0441\u043b\u0438 \u0443 \u0412\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f\/\u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u0432\u044b\u0441\u043b\u0443\u0448\u0430\u0435\u043c. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0442\u043e\u0436\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435, \u043e\u0442\u0432\u0435\u0442\u0438\u043c. <\/p>\n