//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. Hibernate多对多双向关联

    以Student和Course为例,一个学生可以选多门课程,一门课程也可以被多个学生选取: 持久化类Student: package bean; import java.util.Set; publi ...

  2. python学习心得第三章

    python学习心得第三章 1.三元运算 变量=值1 if 条件 else 值2 由图如果条件成立则赋值1给变量,如果条件不成立则赋值2给变量. 2.数据类型 集合:set() class set(o ...

  3. Python全栈开发day4

    1.python三元运算 实现方法: result = 值1 if 条件 else 值2 例如: 1 2 3 4 #!/bin/env python #-*- coding:utf-8 -*- nam ...

  4. SNS网站成功原因剖析_完结

    SNS网站成功原因剖析 前言 亿注册用户)为例,讨论下 Fackbook成功的原因,进而分析结合国内环境,讨论当前国内流行的 SNS网站成功失败要素. 一.Facebook (一) Facebook总 ...

  5. vb.net字符串格式转为日期型

    vb.net字符串格式转为日期型  比如 "20080815" 转换为"2008-05-15"Dim a As Date  Dim s As String = ...

  6. Delphi 完整的Bug决议工具EurekaLog的使用

     http://blog.csdn.net/akof1314/article/details/6968587 Delphi 完整的Bug决议工具EurekaLog的使用 标签: delphi工具ftp ...

  7. 尽快写完Math!

    (1)Arranging Coins 解题思路一:这个想法是关于二次方程,得到算术和的公式是sum =(x + 1)* x / 2 所以对于这个问题,如果我们知道和,那么我们可以知道x =(-1 + ...

  8. latex学习--基础知识

    1 文档结构 文档类.序言.正文 这三部分的基本语法如下: 文档类常用选项 标题.摘要.章节 目录 2 文字排版 字符输入 换行.换页.断字 字样.字号 3 常用命令环境 列表 对齐 摘录 原文照排 ...

  9. centos7 install 安装mysql

    # wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm # rpm -ivh mysql-community- ...

  10. C++设计模式——简单工厂模式

    简单工厂模式(Simple Factory Pattern) 介绍:简单工厂模式不能说是一个设计模式,说它是一种编程习惯可能更恰当些.因为它至少不是Gof23种设计模式之一.但它在实际的编程中经常被用 ...