CODEWITHSUNDEEP
javascriptmysqlangularjsnginfinitescroll
Engin
Engin

Reputation: 815

Infinite scroll duplicates rows

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

Upvotes: 1

Views: 865

Answers (1)

Phillip Thomas
Phillip Thomas

Reputation: 1479

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)

Upvotes: 0

Related Questions