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分页代码的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。