列表渲染数据量庞大的时候,我们需要用到一个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. c 语言技巧

    位运算 & 位逻辑与 | 位逻辑或 ^ 位逻辑异或 - 位逻辑反 >> 右移 << 左移 通过对数据本身的01编码进行处理,速度稍微快于普通运算符 如,10 / 2 = ...

  2. 十六、MySQL LIKE 子句

    MySQL LIKE 子句 我们知道在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录. WHERE 子句中可以 ...

  3. java设计模式2--工厂模式

    1.工厂模式特点 可以工厂获取我们所需要的类.我们不需要知道工厂的内部是如何实现的,我们只需要告诉工厂我们需要哪个类,工厂就会自动返回我想要的类. 简单来说:工厂帮我们隐藏了复杂的逻辑处理过程,我们只 ...

  4. 整合mybatis和spring时 Error creating bean with name 'sqlSessionFactory' defined in class path resource

    今天在整合mybatis和spring的时候出的错 报错如下 Exception in thread "main" org.springframework.beans.factor ...

  5. php 数据脱敏显示

    /** * 数据脱敏 * @param $string 需要脱敏值 * @param int $start 开始 * @param int $length 结束 * @param string $re ...

  6. tcl之关于TCL

  7. 如何用eclipse运行导入的maven项目

    1.配置jdk系统环境变量.找到安装的jdk的安装目录,新建系统环境变量,变量名为JAVA_HOME(作为一个引用),变量值为该路径. 找到Path,将%JAVA_HOME%/bin; 添加到变量值的 ...

  8. stm32串口——标志位学习

    /* 在USART的发送端有2个寄存器,一个是程序可以看到的USART_DR寄存器,另一个是程序看不到的移位寄存器,对应USART数据发送有两个标志,一个是TXE=发送数据寄存器空,另一个是TC=发送 ...

  9. Broken robot CodeForces - 24D (概率DP)

    You received as a gift a very clever robot walking on a rectangular board. Unfortunately, you unders ...

  10. collections模块简介

    collections模块简介 除python提供的内置数据类型(int.float.str.list.tuple.dict)外,collections模块还提供了其他数据类型,使用如下功能需先导入c ...