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 ...
随机推荐
- Zabbix监控告警Lack of free swap space on Zabbix server解决办法
报错详情如下: 是因为Zabbix监控没有考虑虚拟主机的交换空间情况 解决办法修改配置 修改表达式内容:{Template OS Linux:system.swap.size[,pfree].last ...
- Nginx 配置支持 WAF
WAF(Web Application Firewall),中文名叫做“Web应用防火墙” WAF的定义是这样的:Web应用防火墙是通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提 ...
- php短网址生成算法
<?php //短网址生成算法 class ShortUrl { //字符表 public static $charset = "0123456789ABCDEFGHIJKLMNOPQ ...
- vue.js devtools安装
在调试的时候chrome会提示安装vue devtools,我以为是要在chrome的程序商店直接安装,但是国内对谷歌的和谐,无法访问谷歌商店内容 官方有源代码,可以下载下来自行编译安装 官方地址:h ...
- 利用Django提供的ModelForm增删改数据
上一篇我们写了Django基于类如何增删改数据的方法,方法虽然简单,但新手可能对其原理不是很清楚,那么我们这次就用Django提供的ModelForm方法来实现增删改数据,这是一种基于现有模型的增删改 ...
- Python知识点入门笔记——特色数据类型(字典)
Python中字典是一些列键 (key) 值 (value) 对组成的,形式如下 {键1:值1,键2:值:2} 每个键值对用冒号隔开,每对之间用逗号隔开 键必须是唯一的,必须是不可变的,如字符串,数字 ...
- CSS-标准盒模型 & 怪异盒模型
CSS中Box model分类 CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 怪异模式是“ ...
- P1605迷宫
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...
- 洛谷P1162 填涂颜色
题目链接:https://www.luogu.org/problemnew/show/P1162 这道题是LITTLESUN写的第一道BFS哦! 对于这道题的的思路是把封闭图形外边的0标记一边,在最后 ...
- 使用code::blocks编译windows的dll链接库
因为机子上没有安装Visual Studio,所以找到了一种通过code::blocks编译dll的方式,踩到的坑是code::blocks默认的compiler是32位的,这样编译出的dll也是32 ...