//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. vertica 8.0 新特性

    前言: <<line>> 表明在vertica 8.0文档中的title   正文: 1-支持平台 1.1-操作系统 <<Vertica Server and Ve ...

  2. VLAN 间路由的几种方法

    方法一:给每个VLAN去分配一个路由器的物理连接第一步,PC设置IP地址和网关192.168.2.2/24 网关是192.168.2.1192.168.3.2/24 网关是192.168.3.1第二步 ...

  3. callback转Promise

    环境:  nodejs - v6.2.0 const fs = require('fs'); let Promise = require('bluebird'); let readSync = fun ...

  4. Android开源项目分类汇总

    目前包括: Android开源项目第一篇——个性化控件(View)篇   包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView. ...

  5. Python2.7如何安装numhttp://www.cnblogs.com/yuanzm/p/4089856.htmlpy

    numpy是python一个函数库,做数据挖掘是很好的.但是一般是不带这个函数库的,所以接下来我要讲下如何安装这个函数库, 首先有一种方法是: 傻瓜式安装法:https://sourceforge.n ...

  6. Erlang 从入门到精通(三) 改变工作目录

    对于初学者来书,经常会碰到下面的错误: no such file or directoryerror 提示找不到文件,这时候就需要将文件放到工作目录下,或者直接修改工作目录到文件所在位置. 右键ERl ...

  7. autoLayout约束图解

  8. SWT布局管理器

    一.充满式布局管理器(FillLayout类) FillLayout类是最简单的布局类,它把组件摆放成一行或者一列,并强制组件大小一致.一般,组件的高度与最高的组件一致,宽度与最宽的组件相同.,它里面 ...

  9. textarea之placeholder

    placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新 ...

  10. ItextDemo<二>

    Nested tables TableTemplate.java /** * Example written by Bruno Lowagie in answer to the following q ...