Angular Infinite Scrolling

Question

Ich versuche, dieses Plunk-Beispiel für meine Anwendung zu implementieren http://plnkr.co/edit/p6Dt3yvTq40Vn56AKiqC?p=preview. Hier ist die Client-Seite:

$scope.fetch = function($select, $event) { 
    if ($scope.loading) { 
     return; 
    } 
    // no event means first load! 
    if (!$event) { 
     $scope.page = 1; 
     $scope.items = []; 
    } else { 
     //$event.stopPropagation(); 
     //$event.preventDefault(); 
     $scope.page += 1; 
    } 

    $scope.loading = true; 
    $http({ 
     method: 'GET', 
     url: 'http://localhost/search/books', 
     params: { 
     q: $select.search, 
     page: $scope.page 
     } 
    }).then(function(books) { 
     $scope.items = $scope.items.concat(books.data.items); 
    })['finally'](function() { 
     $scope.loading = false; 
    }); 
    }; 

Aber sobald ich das Ende meiner Ergebnisse zu erreichen, ist es eine Schleife und das Scrollen hält meine Datenbank zu holen und zurück ein leeres Array.

In meinem Backend ich sende einen Wert, wenn ich das Limit erreiche, aber wie kann ich das Scrollen auf der Client-Seite zu stoppen, sobald ich das Limit erreicht?

dank

Answer 1

$scope.search = 'not specified'; 
$scope.limit = false; 

$scope.fetch = function($select, $event) { 
    if ($scope.loading) { 
     return; 
    } 
    // no event means first load! 
    if (!$event) { 
     $scope.page = 1; 
     $scope.items = []; 
    } else { 
     //$event.stopPropagation(); 
     //$event.preventDefault(); 
     $scope.page += 1; 
    } 

    if($scope.search != $select.search || !$scope.limit) 
    { 
     $scope.search = $select.search; 
     $scope.loading = true; 
     $http({ 
     method: 'GET', 
     url: 'https://api.github.com/search/repositories', 
     params: { 
      q: $select.search, 
      page: $scope.page 
     } 
     }).then(function(resp) { 
     $scope.items = $scope.items.concat(resp.data.items); 
     $scope.limit = resp.data.limitReached; 
     })['finally'](function() { 
     $scope.loading = false; 
     }); 
    } 
};