Angular JS – Pagination Directive

Given:

pageInfo: {
    page = zero-based page index
    pageCount = number of pages
    hasPrev = boolean
    hasNext = boolean
};

angular.module("myApp.directives").directive("pagination", function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            pageInfo: "=",
            onPageChange: "="
        },
        templateUrl: "/apps/myApp/templates/paginationDirective.html",
        controller: ["$scope", function($scope) {
            var range = 3;
 
            $scope.paginationItems = [];
            $scope.$watch('pageInfo', calculatePaginationItems, true);
 
            $scope.isActive = function(paginationItem) {
                return paginationItem == $scope.pageInfo.page + 1;
            };
 
            function calculatePaginationItems() {
                if (!!$scope.pageInfo) {
                    var curPage = Math.max(Math.min($scope.pageInfo.page - range,
                        $scope.pageInfo.pageCount - (range * 2 + 1)), 0);
 
                    for (var n = 0; n < (range * 2 + 1); n++) {
                        if (curPage == $scope.pageInfo.pageCount) {
                            break;
                        }
                        $scope.paginationItems.push(++curPage);
                    }
                }
            }
        }]
    };
});

<ul class="pagination pagination-sm no-margin pull-right">
    <li class="paginate_button previous" ng-class="{'disabled': !pageInfo.hasPrev}">
        <span role="button" ng-click="onPageChange(1)">
            <i18n key="pagination.first" />
        </span>
    </li>
    <li class="paginate_button previous" ng-class="{'disabled': !pageInfo.hasPrev}">
        <span role="button" ng-click="onPageChange(pageInfo.page)">
            <i18n key="pagination.prev" />
        </span>
    </li>

    <li class="paginate_button" ng-repeat="paginationItem in paginationItems" ng-class="{'active': isActive(paginationItem)}">
        <span role="button" ng-click="onPageChange(paginationItem)">
            {{paginationItem}}
        </span>
    </li>

    <li class="paginate_button previous" ng-class="{'disabled': !pageInfo.hasNext}">
        <span role="button" ng-click="onPageChange(pageInfo.page + 2)">
            <i18n key="pagination.next" />
        </span>
    </li>
    <li class="paginate_button previous" ng-class="{'disabled': !pageInfo.hasNext}">
        <span role="button" ng-click="onPageChange(pageInfo.pageCount)">
            <i18n key="pagination.last" /> ({{pageInfo.pageCount}})
        </span>
    </li>
</ul>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s