angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。

先来看下效果图

实例代码

 app.directive('pagePagination', function(){
   return {
     restrict : 'E',
     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>',
     replace : true,
     scope : {
       "pageId"      : "=",
       "pageRecord"    : "=",
       "pageSize"     : "=",
       "pageUrlTemplate"  : "="
     },
     controller : ['$scope', function($scope){

       $scope.getLink = function(pageId){
         return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
       };

       $scope.getPageList = function(){
         var page = [];
         var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
         page.push({
           name  : '首页',
           style  : $scope.pageId == 1 ? "disabled" : "",
           link  : $scope.getLink(1)
         });
         page.push({
           name  : '上一页',
           style  : $scope.pageId == 1 ? "disabled" : "",
           link  : $scope.getLink(1)
         });
         for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
           if( pageId >= 1 && pageId <= $scope.pageCount ){
             page.push({
               name  : pageId,
               link  : $scope.getLink(pageId),
               style  : pageId == $scope.pageId ? "active" : ""
             });
           }
         }
         page.push({
           name  : '下一页',
           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
           link  : $scope.getLink($scope.pageCount)
         });
         page.push({
           name  : '尾页',
           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
           link  : $scope.getLink($scope.pageCount)
         });
         return page;
       };

       $scope.pageInit = function(){
         if( !$scope.pageId || !$scope.pageRecord ){
           setTimeout(function(){
             $scope.$apply(function(){
               $scope.pageInit();
             });
           }, 10);
         }else{
           if( !!$scope.pageSize ){
             $scope._pageSize = parseInt($scope.pageSize);
           }else{
             $scope._pageSize = 10;
           }
           $scope.pageId    = parseInt($scope.pageId);
           $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
           if( $scope.pageId < 1 ){
             $scope.pageId = 1;
           }else if( $scope.pageId > $scope.pageCount ){
             $scope.pageId = $scope.pageCount;
           }
           $scope.pageLoad   = true;
           $scope.pageList   = $scope.getPageList();
         }
       };

       $scope.pageLoad = false;
       $scope.pageInit();
     }]
   }
 });

调用代码：

 <page-pagination
   page-id="pageId"
   page-record="recordCount"
   page-url-template="urlTemplate">
 </page-pagination>

以上就是angular.js分页代码的全部内容，希望对大家的学习有所帮助。