• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > angular.js分页代码的实例

angular.js分页代码的实例

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angular.js实例,angular js,angular.js下载,angular js菜鸟教程,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();
    }]
  }
});
</div>

调用代码:

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

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

</div>

您可能想查找下面的文章:

  • 用angular实现多选按钮的全选与反选实例代码
  • angular实现IM聊天图片发送实例
  • Angular中实现树形结构视图实例代码
  • Angular中ng-bind和ng-model的区别实例详解
  • Angular多选、全选、批量选择操作实例代码
  • 基于Angular.js实现的触摸滑动动画实例代码
  • Angular JS数据的双向绑定详解及实例
  • Angular ng-repeat指令实例以及扩展部分
  • Angular.js实现注册系统的实例详解
  • Angular 常用指令实例总结整理

相关文章

  • 2017-05-30浅析如何利用angular结合translate为项目实现国际化
  • 2017-05-30详解Angular.js的$q.defer()服务异步处理
  • 2017-05-30AngularJS Bootstrap详细介绍及实例代码
  • 2017-05-30AngularJS实现表单验证功能
  • 2017-05-30详解angularJs中自定义directive的数据交互
  • 2017-05-30深入解析AngularJS框架中$scope的作用与生命周期
  • 2017-05-30AngularJS实现分页显示数据库信息
  • 2017-05-30AngularJs上传前预览图片的实例代码
  • 2017-05-30AngularJS基础知识笔记之表格
  • 2017-05-30AnjularJS中$scope和$rootScope的区别小结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS模块管理问题的非常规处理方法
    • Angular在一个页面中使用两个ng-app的方法
    • 基于angularJS的表单验证指令介绍
    • 详解angularjs结合pagination插件实现分页功能
    • AngularJS基础 ng-open 指令简单实例
    • AngularJS入门教程之模块化操作用法示例
    • 利用angularjs1.4制作的简易滑动门效果
    • AngularJS教程之简单应用程序示例
    • AngularJS数据源的多种获取方式汇总
    • 快速学习AngularJs HTTP响应拦截器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有