Модуль постраничной навигации для ангуляра. (AngularJS)

Использовать так:

<idf-pagination data="paginate"></idf-pagination>  

где paginate объект вида

$scope.paginate = {  per_page: 10,  total: null,  page: 1  };  

при изменении страницы меняется $scope.paginate.page, на него надо повесить листнер и производить действия по изменению, например:

$scope.$watch("paginate", function(data, oldData){  if(data.page == oldData.page) return;   reloadData();  }, true);  

Постраничка не показывается, если нет total и если доступна только 1 страница.

Листинг модуля idf-pagination.js

angular.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;             };         }     }; }]); 

Если у Вас есть замечания/предложения как сделать лучше с удовольствием выслушаем. Если есть вопросы тоже задавайте, ответим.

ссылка на оригинал статьи https://habrahabr.ru/post/282994/