列表渲染数据量庞大的时候,我们需要用到一个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-关于分页的更多相关文章

  1. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  2. Angular pagination分页模块 只提供分页参数处理 不处理分页记录数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. angular+bootstrap分页指令案例

    AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用. Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angula ...

  4. angular表格分页

    <!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  5. Angular简易分页设计(二):封装成指令

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/) 之前我们讲过,Angular分页代码确实不难实现,但是由于在多个路由 ...

  6. Angular简易分页设计(一):基本功能实现

    (首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...

  7. angular js 分页

    一.编写实体类PageResult public class PageResult implements Serializable { private Long total;//总记录数 privat ...

  8. angular自定义分页组件(实用)

    功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...

  9. Angular.js分页代码

                $scope.reloadList=function(){                             $scope.findPage( $scope.pagina ...

  10. 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法

    这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...

随机推荐

  1. 【Django】Django开发中的日志输出

    开发环境:Ubuntu16.04+Django 1.11.9+Python2.7 一:使用自定义函数输出日志到log文件: import time def print_log(log): file_o ...

  2. java的模运算

    在学习某个加密算法的时候留意到模运算,仔细查了资料后才注意到Java中的 % 其实是取余而不是取模,但是百度的时候找到的很多文章都把Java的 % 直接当成取模来用了,为了少踩坑所以自己整理了一下写了 ...

  3. JZOJ 2137. 【GDKOI2004】城市统计 (Standard IO)

    2137. [GDKOI2004]城市统计 (Standard IO) Time Limits: 1000 ms  Memory Limits: 128000 KB  Detailed Limits  ...

  4. Redis之set类型操作

    接口: package com.net.test.redis.base.dao; /** * @author*** * @Time:2017年8月10日 下午2:32:12 * @version 1. ...

  5. Python学习笔记:math模块(数学),random模块(随机数)

    math模块 math模块用于数学意义上的一些计算,常用的方法有: math.pi:PI的值(3.141592653589793). math.floor(x):返回一个小于等于x的最大整数(浮点类型 ...

  6. 从0到n-1中随机等概率输出m个不同的数

    //假设输入的n远大于m void knuth(int n, int m) { for (int i = 0; i < n; i++) { if (rand() % (n - i)<m) ...

  7. Codeforces Round #524 (Div. 2) C. Masha and two friends 思路

    题目:题目链接 思路:直接计数显然是不好处理的,但分情况讨论只要不写错这题是一定可以出的,但这样基本做完这个题就没时间做其他题了,但当时我就这么蠢的这样做了,比赛一个半小时的时候突然发现一个似乎可行的 ...

  8. java并发面试题-基础

    多线程 java中有几种方法可以实现一个线程? 1.直接继承thread类:2.实现runnable接口: 如何停止一个正在运行的线程?可以使用正在运行的线程,支持线程中断,通常是定义一个volati ...

  9. win8 远程桌面时提示凭证不工作问题的终极解决办法

    环境说明 远程办公电脑(放置于公司.自用办公电脑.win8系统) 远程连接客户机(放置于家中.家庭日常所用.win8系统) 故障现象 最近在使用远程桌面连接公司的办公电脑时,突然发现win8系统总是无 ...

  10. Asp.net自定义控件开发任我行(附1)-属性一览众山小

    元数据属性应用于服务器控件及其成员,从而提供由设计工具.ASP.NET 页分析器.ASP.NET 运行库以及公共语言运行库使用的信息.当页开发人员在可视化设计器中使用控件时,设计时属性能改进开发人员的 ...