ng中实现分页功能

1.html

 <ul class="carListFy" ng-show="carLists.length">
                <li class="carListPre" ng-class="{'prePageGry':pageNum==1}" ui-sref="m.carList({pageNum:pageNum-1<1?1:pageNum-1,groupKey:groupKey,searchKey:carListKey})"></li>
                <li class="carListPage" ng-repeat="page in carListPages" ui-sref="m.carList({pageNum:page,groupKey:groupKey,searchKey:carListKey})" ng-class="{'bluePage':page==pageNum}">{{page}}</li>
                <li class="carListAfter" ng-class="{'aftPageGry':pageNum==carListTotal}" ui-sref="m.carList({pageNum:pageNum-(-1)>carListTotal?carListTotal:pageNum-(-1),groupKey:groupKey,searchKey:carListKey})"></li>
                <li class="carListPageTo">
                    <span>{{'tur-page' | translate}}</span>
                    <input type="text" ng-model="turnToPage">
                </li>
                <li class="carListSure">
                    <span ng-click="goToPage(turnToPage)">{{'sure' | translate}}</span>
                </li>
            </ul>

2.js

// 分页(pageTotal：总页数，pageCount:一页的条目数,currentPage:当前页数)
ddpAdminApp.service('Pagination', function () {
    this.page = function (pageTotal, pageCount, currentPage) {
        this.pageNumArray = [];
        var pageStart;
        var pageEnd;
        if (currentPage <= pageCount / 2 + 1) {
            pageStart = 1;
            pageEnd = pageCount;
        } else if (currentPage > pageCount / 2 + 1) {
            pageStart = currentPage - pageCount / 2;
            pageEnd = currentPage + pageCount / 2 - 1;
        }
        // 对pageEnd 进行校验，并重新赋值
        if (pageEnd > pageTotal) {
            pageEnd = pageTotal;
        }
        if (pageEnd <= pageCount) {// 当不足pageNum数目时，要全部显示，所以pageStart要始终置为1
            pageStart = 1;
        }
        for (var i = pageStart; i <= pageEnd; i++) {
            this.pageNumArray.push(i);
        }
        return (this.pageNumArray);
    }

})

3.css

.carListFy {
    float: right;
}


.carListFy > li {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
}


.carListPre {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(../images/page_pre_black.png) no-repeat center center/20px 20px;
}


.carListPage {
    height: 20px;
    min-width: 20px;
    padding: 0 2px;
    cursor: pointer;
    border: 1px solid #dadada;
    color: #27282A;
    text-align: center;
    line-height: 19px;
}


.carListAfter {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(../images/page_aft_black.png) no-repeat center center/20px 20px;
}


.carListPageTo {
    margin-left: 20px;
}


.carListPageTo > span {
    color: #686868;
}


.carListPageTo > input {
    border: 1px solid #dadada;
    width: 30px;
    text-align: center;
    line-height:19px;
}


.carListSure {
    color: #188AE2;
    margin-left: 20px;
    cursor: pointer;
}