对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。
先来看下效果图
实例代码
1 app.directive(‘pagePagination‘, function(){ 2 ??return { 3 ????restrict : ‘E‘, 4 ????template : ‘<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>‘, 5 ????replace : true, 6 ????scope : { 7 ??????"pageId" ?????: "=", 8 ??????"pageRecord" ???: "=", 9 ??????"pageSize" ????: "=",10 ??????"pageUrlTemplate" ?: "="11 ????},12 ????controller : [‘$scope‘, function($scope){13 ????????14 ??????$scope.getLink = function(pageId){15 ????????return $scope.pageUrlTemplate.replace("{PAGE}", pageId);16 ??????};17 ??18 ??????$scope.getPageList = function(){19 ????????var page = [];20 ????????var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;21 ????????page.push({22 ??????????name ?: ‘首页‘,23 ??????????style ?: $scope.pageId == 1 ? "disabled" : "",24 ??????????link ?: $scope.getLink(1)25 ????????});26 ????????page.push({27 ??????????name ?: ‘上一页‘,28 ??????????style ?: $scope.pageId == 1 ? "disabled" : "",29 ??????????link ?: $scope.getLink(1)30 ????????});31 ????????for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){32 ??????????if( pageId >= 1 && pageId <= $scope.pageCount ){33 ????????????page.push({34 ??????????????name ?: pageId,35 ??????????????link ?: $scope.getLink(pageId),36 ??????????????style ?: pageId == $scope.pageId ? "active" : ""37 ????????????});38 ??????????}39 ????????}40 ????????page.push({41 ??????????name ?: ‘下一页‘,42 ??????????style ?: $scope.pageId == $scope.pageCount ? "disabled" : "",43 ??????????link ?: $scope.getLink($scope.pageCount)44 ????????});45 ????????page.push({46 ??????????name ?: ‘尾页‘,47 ??????????style ?: $scope.pageId == $scope.pageCount ? "disabled" : "",48 ??????????link ?: $scope.getLink($scope.pageCount)49 ????????});50 ????????return page;51 ??????};52 ??53 ??????$scope.pageInit = function(){54 ????????if( !$scope.pageId || !$scope.pageRecord ){55 ??????????setTimeout(function(){56 ????????????$scope.$apply(function(){57 ??????????????$scope.pageInit();58 ????????????});59 ??????????}, 10);60 ????????}else{61 ??????????if( !!$scope.pageSize ){62 ????????????$scope._pageSize = parseInt($scope.pageSize);63 ??????????}else{64 ????????????$scope._pageSize = 10;65 ??????????}66 ??????????$scope.pageId ???= parseInt($scope.pageId);67 ??????????$scope.pageCount ?= parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;68 ??????????if( $scope.pageId < 1 ){69 ????????????$scope.pageId = 1;70 ??????????}else if( $scope.pageId > $scope.pageCount ){71 ????????????$scope.pageId = $scope.pageCount;72 ??????????}73 ??????????$scope.pageLoad ??= true;74 ??????????$scope.pageList ??= $scope.getPageList();75 ????????}76 ??????};77 ????????78 ??????$scope.pageLoad = false;79 ??????$scope.pageInit();80 ????}]81 ??}82 });调用代码：
1 <page-pagination2 ??page-id="pageId"3 ??page-record="recordCount"4 ??page-url-template="urlTemplate">5 </page-pagination>
以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助。
angular.js分页代码的实例
原文地址：https://www.cnblogs.com/softwyy/p/8684837.html