AngularJS Laden Sie mehr Funktion

Question

So versuche ich load mehr Funktion zu machen. Ich hole Daten von twitch API und es kommt als Array von Objekten.

$ scope.myName ist ein Array, in dem Daten gespeichert sind und es in ng-repeat verwendet wird.
$ scope.x ist eine Variable, die für den Offset verwendet wird und nach dem Anklicken wird die Schaltfläche inkrementiert und zum Abrufen neuer Streams verwendet. Wenn ich auf die Schaltfläche klicke, werden 9 alte Streams gelöscht und 9 neue Streams geladen und einfach jedes Mal 9 weitere hinzufügen, wenn auf die Schaltfläche geklickt wird. Siehe hier: https://plnkr.co/edit/TbOf9hkPILJn2snW8D7A Danke.

Answer 1

Wenn ich Problem gut verstanden, sollten Sie nur Ihre Daten Array anhängen anstatt sie zu ersetzen:

$scope.myName = []; 
$scope.loadData = function() { 

$http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) { 
    // add streams to existing array 
    Array.prototype.push.apply($scope.myName, response.data.streams); 

    $scope.link="http://player.twitch.tv/?channel="; 
    return $scope.x=$scope.x + 9; }); }; 
    //initial load 
    $scope.loadData(); 

Answer 2

HERE IS THE SOLUTION OF PLNKR

ich geändert habe Streamovi Controller und zusätzliche Belastung mehr Taste an der Unterseite, so dass Sie kann mehr laden

app.controller('Streamovi', function($scope, $http) { 

    var ITEMS_PER_LOAD = 9; 
    var offset = 0; 
    $scope.myName = []; 

    function loadStreams(){ 
    $http.get("https://api.twitch.tv/kraken/streams?limit="+ITEMS_PER_LOAD+'&offset='+offset).then(function(response) { 
     $scope.myName = $scope.myName.concat(response.data.streams); 
     $scope.link="http://player.twitch.tv/?channel="; 
     offset+=ITEMS_PER_LOAD; 
    }); 
    } 

    //handler for the "Load More" button in the view. 
    $scope.loadMore = function(){ 
    loadStreams(); 
    } 

    //initial Loading 
    loadStreams(); 
});