angular.js分页代码的实例  更新时间:2016年07月27日 10:11:26   投稿:daisy   本文用实例详细给大家展示了angular.js分页代码,代码很详细,感兴趣的小伙伴们可以参考一下 对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。 先来看下效果图 实例代码 app.directive(‘pagePagination’, function(){ return { restrict : ‘E’, template : ‘{{ page.name }}共 {{ 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 : ‘首页’, 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(); }] } }); 调用代码: 以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: Angular.js与Bootstrap相结合实现表格分页代码 ANGULARJS中使用JQUERY分页控件 angularjs表格分页功能详解 AngularJS实现分页显示数据库信息 学习Angularjs分页指令 基于Angularjs实现分页功能 AngularJS 与Bootstrap实现表格分页实例代码 AngularJs实现分页功能不带省略号的代码 Angularjs 实现分页功能及示例代码 利用Angular+Angular-Ui实现分页(代码加简单) angularjs 分页 相关文章 浅谈angularjs $http提交数据探索 这篇文章主要介绍了浅谈angularjs $http提交数据探索,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-01-01 AngularJS 自定义指令详解及实例代码 这篇文章主要介绍了AngularJS 自定义指令,这里整理了详细的资料及简单实例代码,有需要的小伙伴可以参考下 2016-09-09 angular1配合gulp和bower的使用教程 这篇文章主要介绍了angular1配合gulp和bower使用教程,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 2018-01-01 Angularjs 创建可复用组件实例代码 这篇文章主要介绍了Angularjs 创建可复用组件实例代码的相关资料,需要的朋友可以参考下 2016-10-10 AngularJS实现动态添加Option的方法 这篇文章主要介绍了AngularJS实现动态添加Option的方法,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下 2017-05-05 浅析Angular 实现一个repeat指令的方法 这篇文章主要介绍了Angular 实现一个repeat指令的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-07-07 Angular5给组件本身的标签添加样式class的方法 本篇文章主要介绍了Angular 5 给组件本身的标签添加样式class的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 详解angular中如何监控dom渲染完毕 AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕,有兴趣的可以了解一下。 2017-01-01 AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】 这篇文章主要介绍了AngularJS与服务器Ajax交互操作的方法,可实现post传输数据的功能,并附带完整的demo源码供读者下载参考,源码中还包含了前面章节的示例文件,需要的朋友可以参考下 2016-11-11 使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法 这篇文章主要介绍了使用 Github Actions 自动部署 Angular 应用到 Github Pages,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 2020-07-07 最新评论

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

您可能感兴趣的文章:

  • Angular.js与Bootstrap相结合实现表格分页代码
  • ANGULARJS中使用JQUERY分页控件
  • angularjs表格分页功能详解
  • AngularJS实现分页显示数据库信息
  • 学习Angularjs分页指令
  • 基于Angularjs实现分页功能
  • AngularJS 与Bootstrap实现表格分页实例代码
  • AngularJs实现分页功能不带省略号的代码
  • Angularjs 实现分页功能及示例代码
  • 利用Angular+Angular-Ui实现分页(代码加简单)
张贴在3