angular.js分页代码的实例

前端之家收集整理的这篇文章主要介绍了angular.js分页代码的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

先来看下效果

实例代码

Box">
      {{ pageRecord }} 条记录 / 共 {{ pageCount }}
    ',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  : '<a href="/tag/shouye/" target="_blank" class="keywords">首页</a>',style  : $scope.pageId == 1 ? "disabled" : "",link  : $scope.getLink(1)
        });
        page.push({
          name  : '<a href="/tag/shangyiye/" target="_blank" class="keywords">上一页</a>',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  : '<a href="/tag/xiayiye/" target="_blank" class="keywords">下一页</a>',style  : $scope.pageId == $scope.pageCount ? "disabled" : "",link  : $scope.getLink($scope.pageCount)
        });
        page.push({
          name  : '尾页',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();
    }]

    }
    });

    调用代码

    以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章