angular分页指令操作

更新时间：2017年01月09日 08:35:08 作者：灰锅

这篇文章主要为大家详细介绍了angular分页指令操作的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下：

index.html

<body id="sBill" ng-controller="map_ctrl">
  <table class="table table-striped" style="margin: 0px;border:1px solid #ccc;width:800px;min-height:200px;">      
   <tbody> 
     <tr ng-repeat="l in orderList"> 
       <td><input type="radio" name="id" ng-click="select(l.id)" value="{{l.id}}" /></td> 
       <td>{{l.time}}</td>         
     </tr> 
   </tbody> 
  </table> 
  <!-- paging datalist属性值(dataList)为要分页的原始数据--> 
  <rj-date datalist="dataList"></rj-date> 

 </body>

index.js

var app = angular.module("doSBill",[]);

app.controller("map_ctrl",function($scope,$http,$location,$timeout){ 
  // 原始数据
  $scope.dataList=[
  {'time':1},{'time':2},{'time':3},{'time':4},{'time':5},{'time':6},{'time':7},{'time':8},{'time':9},{'time':10},
  {'time':11},{'time':12},{'time':13},{'time':14},{'time':15},{'time':16},{'time':17},{'time':18},{'time':19},{'time':20},
  {'time':21},{'time':22},{'time':23},{'time':24},{'time':25},{'time':26},{'time':27},{'time':28},{'time':29},{'time':30},
  {'time':31}
  ];
  //$on：监听或接收数据；此处用于监听分页指令，修改的列表视图数据
  $scope.$on("orderList", function(e, orderList){
   $scope.orderList = orderList;
  });

});

指令模板 page.html

<div>
 <p>
  <span>
   总记录数：<span class="rjAllNums" ng-bind="page.nums"></span>
   本页记录数：<span class="rjNowNums" ng-bind="page.nowNums"></span>
  </span>
  <button class="rjFirtPage" ng-click="jumpPage(1,dataList)">首页</button>
  <button class="rjPrePage" ng-click="jumpPage(page.now-1,dataList)">上一页</button>
  <span>
   <span class="rjNowPage" ng-bind="page.now"></span>/
   <span class="rjAllPage" ng-bind="page.pageCount"></span>
  </span>
  <button class="rjNextPage" ng-click="jumpPage(page.now+1,dataList)">下一页</button>
  <button class="rjLastPage" ng-click="jumpPage(page.pageCount,dataList)">尾页</button>
  到第 
  <input class="rjJumpInput" type="text" ng-model="page.jumpPage" name="rjPageName" value=""/>
   页
  <button class="rjJumpBtn" ng-click="jumpPage(page.jumpPage,dataList)">确定</button>
 </p>

</div>

指令定义page.js

app.directive('rjDate',function(){
    return {
      restrict: 'EA',  
      replace: false,
      scope : {dataList:'=datalist'},//设置scope.dataList与指令属性“datalist”值绑定，详情看指令scop作用域      
      templateUrl: 'pageDirective/template/page.html',  
      link: function(scope,elem,attr){

        var page={};//分页对象
        scope.page=page;
        scope.page.onePageNums=10; //每页记录数
        scope.page.nums=0;
        scope.page.now=1;
        scope.page.nowNums=0;
        scope.page.pageCount=1;
        scope.getPage=getPage; //设置获取页面的ng-click
        scope.page.orderList=[];

        getPage(1,scope.dataList);//初始化获取第一页数据

        scope.jumpPage=function(page,dataList){    
          if(!parseInt(page)){
           return null;
          }
          getPage(page,dataList);
         }
        function getPage(pageNow,dataList){//获取指定的页面     
           scope.page.nums=dataList.length; //设置总记录数
           scope.page.now=pageNow;//设置当前是第几页
           pagination();//设置当前有多少页面 生成一个页面数组
           scope.page.orderList=getOnePage(dataList);//获取一页的数据
           scope.$emit("orderList", scope.page.orderList);//$emit：子传父，传递event与data；此处用于给父controller传递数据orderList  
        }
        
        function getOnePage(arr){//获取一页的数据
          if(arr==null){           
           return null;
          } 
          var newarr=new Array();
          if(scope.page.now<1){
            scope.page.now=1;
          }
          if(scope.page.now>scope.page.pageCount){
            scope.page.now=scope.page.pageCount;
          }
          scope.page.nowNums=scope.page.onePageNums;
          var pagenow=scope.page.now; 

          var begin=(pagenow-1)*scope.page.onePageNums;                 
          var end=begin+scope.page.onePageNums;
          var lens=scope.page.nums;

          if(end>lens){
            end=lens;
            scope.page.nowNums=lens-begin;
          }
                
          for(begin;begin<end;begin++){
            newarr.push(arr[begin]);
          }
            return newarr;
        }
        function pagination(){//设置当前有多少页面 生成一个页面数组
          if(scope.page.nums<=scope.page.onePageNums){
            scope.page.pageCount=1;
          }else{
            if(scope.page.nums%scope.page.onePageNums==0){
              scope.page.pageCount=scope.page.nums/scope.page.onePageNums;
            }else{
              scope.page.pageCount=parseInt(scope.page.nums/scope.page.onePageNums)+1;
            }
          }
        }
        
      }
    }
  });

效果如图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Angular 服务器端渲染应用常见的内存泄漏问题小结
这篇文章主要介绍了Angular 服务器端渲染应用一个常见的内存泄漏问题,主要包括屏幕闪烁问题，出现闪烁的原因，在于 Angular 不知道如何重用它在服务器上成功渲染的内容，本文给大家介绍的非常详细，需要的朋友一起学习下吧
2022-06-06
使用Angular内置模块进行HTTP请求
这篇文章主要介绍了使用Angular内置模块进行HTTP请求方法步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Angularjs基础知识及示例汇总
本文给大家总结了一些angularjs的基础知识及相关示例，分享给大家，希望能对大家有所帮助。
2015-01-01
AngularJS 如何在控制台进行错误调试
本文主要介绍AngularJS 如何在控制台进行错误调试，还不错，分享给大家，希望给大家做一个参考。
2016-06-06
详解AngularJS controller调用factory
本篇文章主要介绍了详解AngularJS controller调用factory，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Angular2+如何去除url中的#号详解
这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料，文中先对#号去除的原因及方法进行详细的介绍和分析，然后通过示例代码给大家演示去除的方法，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。
2017-12-12
angular8.5集成TinyMce5的使用和详细配置(推荐)
这篇文章主要介绍了angular8.5集成TinyMce5的使用和详细配置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
Angular开发者指南之入门介绍
本篇文章主要介绍了Angular开发者指南的入门知识，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
动手写一个angular版本的Message组件的方法
本篇文章主要介绍了动手写一个angular版本的Message组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
AngularJS入门教程之 XMLHttpRequest实例讲解
本文主要讲解 AngularJS XMLHttpRequest,这里给大家整理相关资料并提供实例代码,有需要的小伙伴参考下
2016-07-07

angular分页指令操作

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具