I’m using ngInfiniteScroll dependency for my angularjs project.
Whenever I scroll up and down again, it duplicates the rows.
HTML
<table infinite-scroll="loadMore()" ng-controller="LastBookingsCtrl">
JavaScript
$scope.loadMore = function() { $http.get("last.php?start=" + $scope.currentLoadIndex) .then(function (res) { if (res.data.length > 0) { var count = 0; for (var i = 0; i < res.data.length; i++) { $scope.lastBookings.push(res.data[i]); count++; } $scope.currentLoadIndex += count; } }); };
PHP
$start = $_GET['start']; $query = "SELECT * FROM `performs` ORDER BY id DESC LIMIT ".$start.", 20";
Answer
I believe you are getting the same result each time because you $scope.currentLoadIndex
is not updating correctly from the then()
. Try setting the next index to the length of the current list aka:
$http.get("last.php?start=" + $scope.lastBookings.length)