AngularJs自定义分页

创建一个Html分页的模板

<div>
    <ul>
        <li class="pageleft" ng-click="PrevGroup()">
            <!--<a href="#"><</a>-->
        </li>
        <li class="pagepublic" ng-class="{pageliselect:($index+1+settings.pageRangeIndex*settings.pageRange==pageIndex)}" ng-repeat="item in []|RepeatRange:pageShowRange" ng-click="ChangePage($index + 1 + settings.pageRangeIndex * settings.pageRange)">
            <a href="#" class="pageaunselect">{{$index+1+settings.pageRangeIndex*settings.pageRange}}</a>
        </li>
        <li class="pageright" ng-click="NextGroup()">
            <!--<a href="#" aria-label="Next">></a>-->
        </li>
    </ul>
</div>

RepeatRange的filter

App.filter(‘RepeatRange‘, function () {
    return function (input, total) {
        total = parseInt(total);

        for (var i = 0; i < total; i++) {
            input.push(i);
        }
        return input;
    }
})

定义指令

App.directive(‘dirPage‘, [function () {
    return {
        restrict: ‘A‘,
        scope: {
            pageChange: "=",
            pageModel: "=dirPage",
        },
        replace: true,
        templateUrl: ‘spa/plugins/page/template/page.html‘,
        link: pageLink
    }
}]);

function pageLink(scope, element, attrs) {
    function initSettings() {
        if (!scope.settings) {
            scope.settings = {};
        }
        if (!scope.settings.pageSize) {
            scope.settings.pageSize = 10;
        }
        if (!scope.settings.pageRange) {
            scope.settings.pageRange = 10;
        }
        if (!scope.settings.pageRangeIndex) {
            scope.settings.pageRangeIndex = 0;
        }
    }
    initSettings();

    function initPageChange()
    {
        if (scope.pageModel.pageSize)
            scope.settings.pageSize = scope.pageModel.pageSize;
        if (scope.pageModel.pageRange)
            scope.settings.pageRange = scope.pageModel.pageRange;
        scope.totalCount = scope.pageModel.totalCount;
        scope.pageIndex = scope.pageModel.pageIndex;
        if (scope.pageModel.totalCount % scope.settings.pageSize > 0)
            scope.pageCount = parseInt(scope.pageModel.totalCount / scope.settings.pageSize) + 1;
        else
            scope.pageCount = parseInt(scope.pageModel.totalCount / scope.settings.pageSize)
        if (scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex > scope.settings.pageRange)
            scope.pageShowRange = scope.settings.pageRange;
        else
            scope.pageShowRange = scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex;
    }

    initPageChange();

    scope.ChangePage = function (pageIndex) {
        scope.pageIndex = pageIndex;
        if (scope.pageChange) {
            scope.pageChange(pageIndex);
        }
    }

    scope.PrevGroup = function () {
        if (scope.settings.pageRangeIndex >= 1) {
            scope.settings.pageRangeIndex--
            initPageChange();
        }
    }
    scope.NextGroup = function () {
        if (scope.pageCount - scope.settings.pageRange * scope.settings.pageRangeIndex > scope.settings.pageRange) {
            scope.settings.pageRangeIndex++
            initPageChange();
        }
    }
}