列表渲染数据量庞大的时候,我们需要用到一个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. 安装配置eclipse的图文步骤

    装eclipse 之前要确定自己是否已经安装了java开发环境JDK,JDK的版本64位要下载Eclipse版本64位:JDK32位,要下载Eclipse32位. 一.去eclipse官网下载ecli ...

  2. maven引入dubbo包后启动报错

    启动后报错内容为: Caused by: org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exce ...

  3. IDEA整合Mybatis+Struts2+Spring(一)--新建项目

    1.IDEA新建Maven项目: (1)依次点击File->New->Project,弹出如下对话框: (2)在弹出的New Project页面上,①选择Maven,② 勾选Create ...

  4. 【工具】Sublime Text 自动保存功能

    经常需要所以要频繁用到"ctrl+s"保存还是挺麻烦的,所以有的人需要用到失去焦点自动保存功能,这里简单记录下 1.点击"Preferences"里的设置-用户 ...

  5. 03.VUE学习之动态绑定值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. A1046 Shortest Distance (20)(20 分)

    1046 Shortest Distance (20)(20 分)提问 The task is really simple: given N exits on a highway which form ...

  7. linux lvm扩容

    1.分区,  查看磁盘使用:fdisk -l 对磁盘分区:fdisk /dev/sdb 2.创建pv pvcreate /dev/sdb1 查看pv: pvdisplay 3.查看vg  vgdisp ...

  8. docker 学习(3)

    docker和宿主之间的数据共享以及docker间的数据共享仍然是让人头疼和操心的地方. 几个基本概念: docker: 一种容器管理技术,这里也指既有的开发工具链. container: 容器 im ...

  9. callback回调函数【转】

    请给作者点赞--> 原文链接 什么是回调函数? 我们绕点远路来回答这个问题. 编程分为两类:系统编程(system programming)和应用编程(application programmi ...

  10. 一道题目关于Java类加载

    public class B { public static B t1 = new B(); public static B t2 = new B(); { System.out.println(&q ...