频道导航

angular分页指令操作

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了angular分页指令操作，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

index.html

index.js

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

属性“datalist”值绑定，详情看指令scop作用域 templateUrl: 'pageDirective/template/page.html',link: function(scope,elem,attr){

    var page={};//<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>对象
    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; //设置<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的ng-click
    scope.page.orderList=[];

    getPage(1,scope.dataList);//初始化<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>第一页数据

    scope.jumpPage=function(page,dataList){    
      if(!parseInt(page)){
       return null;
      }
      getPage(page,dataList);
     }
    function getPage(pageNow,dataList){//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>指定的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>     
       scope.page.nums=dataList.length; //设置总记录数
       scope.page.now=pageNow;//设置当前是第几页
       pagination();//设置当前有多少<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>一个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>数组
       scope.page.orderList=getOnePage(dataList);//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>一页的数据
       scope.$emit("orderList",scope.page.orderList);//$emit：子传父，传递event与data；此处用于给父controller传递数据orderList  
    }

    function getOnePage(arr){//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>一页的数据
      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(){//设置当前有多少<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>一个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>数组
      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;
        }
      }
    }

  }
}

});

效果如图所示：