Angularjs rolling load more data

AngularJS extends HTML through new attributes and expressions. This article describes how to use Angularjs to load data by scrolling. For more information, see the following example, you need to take a look at the details:

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:

Loading Win & Convert data...

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!

For more Angularjs rolling loading more data-related articles, please follow the PHP Chinese network!