| 标题 | Angularjs 滚动加载更多数据 |
| 内容 | 下面的例子只是为了简单记录怎么使用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 ng-show="showData" when-scroll-end="LoadingData()"> <div id="b" ng-show="isLoadingPIG"> <h6> <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 滚动加载更多数据的相关知识，小编就给大家介绍这么多，希望对大家有所帮助！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。