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

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. 【转】Cocos2d-x纹理优化的一些方案——2013-08-26 22

    http://wap.oschina.net/question/565065_79814 在目前的移动平台游戏开发过程中,很多朋友会遇到开发出来的DEMO占用内存过大,导致渲染效率低下的问题.究其原因 ...

  2. Ubuntu上VNC 配置

    Ubuntu下VNC配置文章分类:操作系统通过将服务器配置成VNC SERVER,可以让其他主机使用图形方式登录这台服务器. 在ubuntu下配置vnc server很简单,方法如下: 服务器端: 1 ...

  3. IBM发布AppScan Source 8.7:减少iOS企业级应用安全风险

    IBM发布AppScan Source 8.7:减少iOS企业级应用安全风险http://automationqa.com/forum.php?mod=viewthread&tid=2570& ...

  4. 清除Eclipse和Myeclipse中的工作空间目录

    打开Eclipse或者Myeclipse后,选择功能菜单里的Windows->Preferences->, 弹出对话框后,选择General->Startup and Shutdow ...

  5. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  6. 20151221jquery学习笔记--验证插件

    验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验.一. 使用 validate.js 插件官网 ...

  7. oracle job interval·相关事例

    描述 Interval参数值 每天运行一次 'SYSDATE + 1' 每小时运行一次 'SYSDATE + 1/24' 每10分钟运行一次 'SYSDATE + 10/(60*24)' 每30秒运行 ...

  8. 使用sqlldr命令导入资料到Oracle数据库表中的示例说明

    CSV: Comma-Separated Values(逗号分隔值)的缩写,是以逗号分隔字段的多行文本文件   sqlldr 是sql*loader的缩写,此工具在安装完整版的Oracle客户端后就有 ...

  9. Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

    Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法 这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter. 默认情况下,Ext.Net GridP ...

  10. ReactNative-----环境搭建二(android)

    一.初始化一个ReactNative项目 在指定目录运行命令:react-native init Vince(项目名称)  //其过程就是在使用CLI工具构建项目, 命令行代码 F:\React> ...