AngularJSもっと多くの機能をロードする

Question

私は、より多くの機能をロードしようとしています。私はtwitch APIからデータを取得しています。

$scope.loadData = function() { 

$http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) { 
    $scope.myName = response.data.streams; 
    $scope.link="http://player.twitch.tv/?channel="; 
    return $scope.x=$scope.x + 9; }); }; 
    //initial load 
    $scope.loadData(); 

$ scope.myNameは、データが格納され、ng-repeatで使用される配列です。
$ scope.xはオフセットに使用する変数で、ボタンをクリックするとインクリメントされ、新しいストリームをフェッチするために使用されます。ボタンをクリックすると古い9ストリームが削除され、新しい9ストリームが読み込まれます。ボタンをクリックするたびに9つずつ追加するだけです。 ここをクリックしてください：https://plnkr.co/edit/TbOf9hkPILJn2snW8D7Aありがとうございます。

Answer 1

私はうまく問題を理解している場合、あなただけの代わりにそれを置き換えるので、あなたのデータ配列を追加する必要があります

$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

私はあなたのように、下部にStreamoviコントローラおよび追加負荷より多くのボタンを変更しました読み込みをトリガーすることができます

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(); 
});