Angularjs 滚动加载更多数据


Posted in Javascript onMarch 17, 2016

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待:

Javascript部分的controller

app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',
function ($scope, $timeout, $window) {
$scope.showData = false;
$scope.isLoadingPIG = false;
$scope.isLoadingUJ = false;
$scope.isLoadingBoxSummary = false;
$scope.LoadingData = function (index) {
$scope.showData = true;
var pigHeight = $(".analysisContainer")[1].children[1].scrollHeight;
var ujHeight = $(".analysisContainer")[1].children[2].scrollHeight;
var boxSummaryHeight = $(".analysisContainer")[1].children[3].scrollHeight;
if (index == 0) {
//$scope.reLoadData = true;
pigHeight = 0;
ujHeight = 0;
$scope.gridOptions.data = null;
}
var showSummaryBox = function () {
$scope.isLoadingBoxSummary = false;
}
var showUj = function () {
$scope.isLoadingUJ = false;
//$scope.isLoadingSummaryBox = true;
//$timeout(showSummaryBox, 1000);
}
var showPig = function () {
$scope.isLoadingPIG = false;
//$scope.isLoadingUJ = false;
//$timeout(showUj, 10000);
}
if (pigHeight == 0) {
$scope.isLoadingPIG = true;
$timeout(showPig, 1000);
} else if (ujHeight == 0) {
$scope.isLoadingUJ = true;
$timeout(showUj, 1000);
} else if (boxSummaryHeight == 0) {
$scope.isLoadingBoxSummary = true;
$timeout(showSummaryBox, 1000);
}
};
}]
).directive('whenScrollEnd', function () {
return function (scope, elm, attr) {
var pageWindow = $(this);
pageWindow.bind('scroll', function (et, ed, pb) {
var winScrollTop = pageWindow.scrollTop();
var winHeight = pageWindow.height();
var maxScrollHeight = $(".analysisContainer")[1].scrollHeight;
if ((winScrollTop + winHeight) > maxScrollHeight) {
scope.$apply(attr.whenScrollEnd);
}
});
}
});

下面是HTML部分:

<div class="analysisContainer" ng-show="showData" when-scroll-end="LoadingData()">
<div id="b" ng-show="isLoadingPIG" style="width: 100%; text-align: center; z-index: 1">
<h6 class="loading">
<img src="~/Content/Images/loading2.gif" />
Loading Win & Convert data...
</h6>
</div>
<div id="a" ng-show="!isLoadingPIG">
<img src="~/2016-03-16_152323.png" />
</div>
<div ng-show="!isLoadingUJ">
<img src="~/2016-03-16_153347.png" />
</div>
<div ng-show="!isLoadingBoxSummary">
<img src="~/2016-03-16_153404.png" />
</div>
</div>

重要的部分是指令(directive)和滚动时要加载数据的部分。

Angularjs 滚动加载更多数据的相关知识,小编就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 #Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 #Javascript
基于jquery实现简单的分页控件
Mar 17 #Javascript
jQuery实现图片局部放大镜效果
Mar 17 #Javascript
jQuery实现放大镜效果实例代码
Mar 17 #Javascript
node.js使用cluster实现多进程
Mar 17 #Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
jquery中ajax学习笔记3
2011/10/16 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
学习python处理python编码问题
2011/03/13 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python3爬楼梯算法示例
2019/03/04 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
医学生实习自我鉴定
2013/09/27 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
中年人生感言
2014/02/04 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年护士节活动总结
2015/02/10 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python