angular-关于分页
列表渲染数据量庞大的时候,我们需要用到一个filter来控制我们的列表进行循环渲染。
这就要用到一个filter,limitTo。

在此,我使用了变量来进行控制,可以随时调换每页的数量,并且配合分页按钮,进行上一页,下一页等操作。
//分页
$scope.begin = 0;
$scope.limit = 3
$scope.limitNub = 3;
window.listLength = 0;
//获取子控制器当中的跳转页数
$scope.$on("change", function(event,data){
$scope.gopages = data;
}); //首页
$scope.Home = function (){
$scope.begin = 0;
};
//上一页
$scope.PgUp = function (){
$scope.begin -= $scope.limitNub;
if($scope.begin < 0){
$scope.begin = 0;
}
};
//下一页
$scope.PgDn = function (){
$scope.begin += $scope.limitNub;
if($scope.begin > listLength){
$scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
}
};
//尾页
$scope.End = function (){
$scope.begin = Math.floor(listLength/$scope.limitNub)*$scope.limitNub;
};
//去X页
$scope.goPage = function (){
if($scope.gopages < (Math.floor(listLength/$scope.limitNub)+2)){
$scope.begin = ($scope.gopages-1)*$scope.limitNub;
}
}; }])
当中还使用了$emit和$on方法进行控制器之间的数据通讯,使得去到某页可以具体实现。
当然,此方法还有待改进,只是先如此使用。
angular-关于分页的更多相关文章
- angular.js分页代码的实例
		对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ... 
- Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据
		<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ... 
- angular+bootstrap分页指令案例
		AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ... 
- angular表格分页
		<!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ... 
- Angular简易分页设计(二):封装成指令
		(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ... 
- Angular简易分页设计(一):基本功能实现
		(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ... 
- angular js 分页
		一.编写实体类PageResult public class PageResult implements Serializable { private Long total;//总记录数 privat ... 
- angular自定义分页组件(实用)
		功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ... 
- Angular.js分页代码
		$scope.reloadList=function(){ $scope.findPage( $scope.pagina ... 
- 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法
		这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ... 
随机推荐
- 十八、MySQL 排序
			MySQL 排序 我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据. 如果我们需要对读取的数据进行排序,我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段 ... 
- HTTP协议原理
			HTTP是一个客户端终端(用户)和服务器端(网站)请求和应答的标准(TCP).通过使用网页浏览器.网络爬虫或者其它的工具,客户端发起一个HTTP请求到服务器上指定端口(默认端口为80).我们称这个客户 ... 
- 时间转换,django的时间设置,re模块简单校验密码和手机号
			时间转换和密码,手机的re模块简单校验 import re,time def check_userinfo(request): pwd = request.POST.get("pwd&quo ... 
- hihocoder#1098 : 最小生成树二·Kruscal算法
			#1098 : 最小生成树二·Kruscal算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用 ... 
- Uva:11401-Triangle Counting
			Triangle Counting Time limit1000 ms Description You are given n rods of length 1, 2-, n. You have to ... 
- 动态规划:HDU-1203-0-1背包问题:I NEED A OFFER!
			解题心得: 动态规划就是找到状态转移方程式,但是就本题0-1背包问题来说转移方程式很简单,几乎看模板就行了. 在本题来说WA了很多次,很郁闷,因为我记录v[i]的时候i是从0开始的,一些特殊数据就很尴 ... 
- [BZOJ1503]郁闷的出纳员(Splay)
			Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常 ... 
- Android如何添加多张引导页
			摘要:项目需要添加多张引导页,所以在网上搜集了一些资料并整理好. Step1 添加一个GuideActivity. 其实这个引导页无非就是一个Activity,里面有一个ViewPager而已.多张图 ... 
- Compoer介绍
			Compoer介绍 Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. 安装Composer Composer.phar 是 Compos ... 
- Go语言之并发编程(一)
			轻量级线程(goroutine) 在编写socket网络程序时,需要提前准备一个线程池为每一个socket的收发包分配一个线程.开发人员需要在线程数量和CPU数量间建立一个对应关系,以保证每个任务能及 ... 
