Angularjs rolling loads more data, angularjs Rolling

Angularjs rolling loads more data, angularjs Rolling

The following example is just to simply record how to use angularjs to implement rolling data loading. The specifics still need to be taken into consideration:

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);}});}});

The following is the HTML section:

<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">

The important part is the directive and the data to be loaded during scrolling.
Angularjs provides more information on rolling loading data. I hope this article will help you with the introduction!
Articles you may be interested in:

 

 
  
Angularjs learning notes-two-way Data Binding
 
  
Automatically load data by Page scrolling Based on AngularJS
 
  
In AngularJS, how does one use $ http to add, delete, modify, and query the data table of the Alibaba lab?
 
  
Three ways to obtain data sources in AngularJS