欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

angular分页指令操作

程序员文章站 2022-05-24 15:44:29
目前的多个项目中都用到分页这个功能，为了提高可复用性，我特地分离出来写了个分页的指令。直接贴代码，详情如下： index.html

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

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分页指令操作

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

上一篇： cdr美术字和段落文本之间怎么直接转换?

下一篇： log4j2的简介及基础配置

推荐阅读