Infinite scroll duplicates rows

Question

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

A bit unrelated to your question, but please read this https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php — Skwal, Dec 07 '17 at 19:16
@enucar What was the issue if you don't mind sharing? It could be helpful for someone. Also, you should consider securing your query against SQL injection like Skwal mentioned. — Phillip Thomas, Dec 07 '17 at 20:03

score 0 · Accepted Answer · answered Dec 07 '17 at 19:33

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)

Infinite scroll duplicates rows

1 Answers1