//pageinfo
$scope.pageSize=10;
$scope.currentType={{ current_type }};
$scope.currentPage={{ json_encode(current_page) }};
$scope.totalPage={{ json_encode(total_page) }};
$scope.pages = [];//分页数组
//下面3句是分页核心
var viewCount = 7;
var firstIdx = ($scope.currentPage<=parseInt(viewCount/2)+1?1:($scope.currentPage-parseInt(viewCount/2)));
var lastIndex = (firstIdx+viewCount-1>=$scope.totalPage?$scope.totalPage:firstIdx+viewCount-1);
if(lastIndex>=$scope.totalPage){
lastIndex = $scope.totalPage;
firstIndex = lastIndex - viewCount+1;
}
$scope.lastPage = lastIndex;
if(firstIdx<1){
firstIdx=1;
}
while(firstIdx<=lastIndex&&$scope.totalPage>1){
$scope.pages.push(firstIdx);
firstIdx++;
} ------------
注:
viewCount 指显示的页码数量,如(上一页,2,3,4,5,6,7,8,下一页)
viewCount = 7
测试结果
输入当前页码1,总页数1 ,显示页码标签 $scope.pages = [];
输入当前页码1,总页数2 ,显示页码标签 $scope.pages = [1,2];
输入当前页码1,总页数3 ,显示页码标签 $scope.pages = [1,2,3];
输入当前页码1,总页数4 ,显示页码标签 $scope.pages = [1,2,3,4];
输入当前页码1,总页数5 ,显示页码标签 $scope.pages = [1,2,3,4,5];
输入当前页码1,总页数6 ,显示页码标签 $scope.pages = [1,2,3,4,5,6];
输入当前页码1,总页数7 ,显示页码标签 $scope.pages = [1,2,3,4,5,6,7];
输入当前页码5,总页数8 ,显示页码标签 $scope.pages = [2,3,4,5,6,7,8];
输入当前页码6,总页数9 ,显示页码标签 $scope.pages = [3,4,5,6,7,8,9];
输入当前页码7,总页数8 ,显示页码标签 $scope.pages = [4,5,6,7,8];

angularjs 的directive定义
.directive('noenter',function() {
return function(scope, element) {
element.on('keypress', function(e) {
if (e.which === 13) {
var page = element.val();
if(page>=1&&page<=scope.totalPage){
return scope.getData(page);
}else{
alert('输入页码超出范围!');
}
}
return true;
})
}
}) 使用:
<input type="text" noenter class="goto-page">
 

angularjs 分页精华代码的更多相关文章

  1. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  2. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...

  3. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  4. AngularJS进阶(十四)AngularJS灵异代码事件

    AngularJS灵异代码事件 注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中 ...

  5. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  6. ASP 三十二条精华代码 (1)

    ASP 三十二条精华代码 (1) 2009-08-10 09:53:03  www.hackbase.com  来源:互联网 1. oncontextmenu="window.event.r ...

  7. angularjs分页组件

    这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码.技术比较渣,先这样了. // ====== 2019-1-3 ======/ ...

  8. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

  9. AngularJS 分页

    前端源码: <div> <h1>列表页33</h1> <table> <thead> <tr><td>CandiID ...

随机推荐

  1. EM算法(3):EM算法运用

    目录 EM算法(1):K-means 算法 EM算法(2):GMM训练算法 EM算法(3):EM算法运用 EM算法(4):EM算法证明 EM算法(3):EM算法运用 1. 内容 EM算法全称为 Exp ...

  2. struts2.3.4,jar包必须添加完整

  3. eclipse debug maven项目时出现缺少库的问题

    调试maven web项目时出现缺少库的情况导致项目无法启动  可是打包到tomcat发布却一切正常 后来在stackoverlow上找到了解决方案 项目右键属性->Deployment Ass ...

  4. 线程小demo

    下午就手写了两个demo,整理了一下. #!/sur/bin/env python # -*- coding:utf-8 -*- __author__ = 'ganzl' import threadi ...

  5. ubuntu 安装 netbeans C++ IDE

    # sudo apt-get install openjdk-7-jdk # sudo apt-get install g++ # cd ~/Downloads # wget http://downl ...

  6. 用R实现全排列的分类

    R 其实是个很好用的东东哦-最近写了个小函数,可以实现全排列数的枚举,代码如下: permut<-function(seq){     seq_len=length(seq);     if(s ...

  7. WinForm中WebBrowser的使用

    最近由于工作需要,研究了下Winform的WebBrowser控件,在这里给大家分享下. 1.WebBrowser导航 WebBrowser在进行导航的时候需要用到Navigate(string ur ...

  8. 谷歌Java编程规范

    Google Java编程风格指南 January 20, 2014 作者:Hawstein 出处:http://hawstein.com/posts/google-java-style.html 声 ...

  9. (转)tar.xz文件如何解压

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数Linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...

  10. ZOJ 1442 Dinner Is Ready 容斥原理 + java大数

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=442 求解 x1 + x2 + x3 + .... + xn = m 其中xi属 ...