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

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分页指令的更多相关文章

  1. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  2. AngularJs--angular-pagination可复用的分页指令

    1.angular-pagination 是基于angular 编写的可复用分页指令 安装 克隆项目到本地: git clone https://github.com/febobo/angular-p ...

  3. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  4. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  5. angular分页插件tm.pagination 解决触发二次请求的问题

    angular分页插件tm.pagination(解决触发二次请求的问题) DEMO:  http://jqvue.com/demo/tm.pagination/index.html#?current ...

  6. Angularjs+Bootstrap实现分页指令

    本插件的开发目的主要给前端同学使用,本人是专注于后台开发的,对css样式不熟悉,但逼于前端要求做一个共公组件方便日常开发,所以这个插件在样式上可能不适合大部分人,喜欢的拿走吧,不喜欢的也请别喷.  一 ...

  7. Angular学习-指令入门

    1.指令的定义 从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势, ...

  8. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  9. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

随机推荐

  1. schedule

    cocos2d-x(时间调度) 在游戏中,时常需要隔一段时间更新一些数据或者是人物位置,Cocos2D-x 中提供了这些时间调度的函数,所有CCNode 类的子类都有这样的函数. schedule(s ...

  2. 获取java项目 classpath目录

    this.getClass().getResource("/").getPath(); 从根目录获取载入文件: this.getClass().getResourceAsStrea ...

  3. (整理)FORM：Oracle EBS客制化Form的菜单栏用法说明

    用户最多可以定义45个form-level的trigger,名称必须为SPECIALn, 其中SPECIAL1 to SPECIAL15属于Tools菜单项,放在“工具”主菜单下. SPECIAL16 ...

  4. 通过文件读写方式实现Matlab和Modelsim的联合仿真

    虽然Modelsim的功能非常强大,仿真的波形可以以多种形式进行显示,但是当涉及到数字信号处理的算法的仿真验证的时候,则显得有点不足.而进行数字信号处理是Matlab的强项,不但有大量的关于数字信号处 ...

  5. LoadRunner安装包（性能测试工具分享）

    今天在测试课指导老师朱香元的指导下,开始了测试软件的安装,下面我分享一下整个安装流程,最后我会附带安装包的 第一步:链接:http://pan.baidu.com/s/1pXqk2 密码:csjk , ...

  6. 分享使用method swizzling的经历

    原文:http://www.cnblogs.com/lujianwenance/p/5800232.html   这是一个很蛋疼的过程,先说一下需求,列表页预加载更多(60%).当我看到这个需求的时候 ...

  7. ios fixed属性bug解决方法

    在内容层外面包一个div 加上样式:position:fixed;top:0px; bottom:50px;overflow:scroll; 就可以完美解决

  8. OC - 8.Quartz2D核心要点

    简介 作用 绘制 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件(通常为内部结构较复杂的控件) UIKit中的绝大部分控 ...

  9. java新手笔记18 类比较

    1.Shap类 package com.yfs.javase; public class Shape /*extends Object */{ //默认继承object object方法全部继承 // ...

  10. weblogic 12c 配置jvm的内存大小

    每个weblogic server 都是运行在一个java虚拟机上 ,对weblogic的内存设置也就是对java虚拟机的内存设置. MEM_ARGS=-Xms512m -Xmx1024m -XX:M ...