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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
js轮播图代码分享
Jul 14 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
基于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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php数据库连接
2006/10/09 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
js转换对象为xml
2017/02/17 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Vue组件创建和传值的方法
2018/08/17 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python实现针对中文排序的方法
2017/05/09 Python
速记Python布尔值
2017/11/09 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
清华大学自主招生自荐信
2014/01/29 职场文书
十佳护士先进事迹
2014/05/08 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
信用卡工作证明范本
2015/06/19 职场文书
工作感言一句话
2015/08/01 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS