angular分页指令操作

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

index.html

  
      
   
 
     
 
 
{{l.time}}
  
     
 
   
 
  
 
   
   

 

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

 

  
   总记录数：
   本页记录数：
  
  首页
  上一页
  
   /
   
  
  下一页
  尾页
  到第 
  
   页
  确定
 

 

指令定义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

 效果如图所示：

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