Here is a snippet of code that utilizes AngularJS to retrieve a JSON response.
I am looking for assistance in implementing a functionality where the page should make additional requests when the user scrolls to the bottom, continuing until the JSON array list is depleted.
<section>
<div style="padding-top:60px" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="news in newsList">
<div class="col-lg-3 col-md-4 col-sm-6" style="">
<div class="thumbnail">
<img src="{{news.coverUrl}}" class="img-responsive" alt="{{news.name}}"/>
<div class="caption">
<h4>{{news.name}}</h4>
</div>
</div>
</div>
<div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
<div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
<div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/ng-infinite-scroll.min.js"></script>
<script>
var offset = 0
var maxCount = 20
var app = angular.module('myApp', ['infinite-scroll']);
function myPagingFunction(){
app.controller('myCtrl', function($scope, $http) {
$http.get("news.json").then(function(response) {
$scope.newsList = response.data;
});
});
}
myPagingFunction();
</script>
<script src="js/bootstrap.min.js"></script>
If you have any insights or guidance on how to achieve this functionality, I would greatly appreciate your help.