AngularJS Загрузите дополнительную функцию

Question

Так что я пытаюсь сделать загрузку большей функцией. Я извлекаю данные из API twitch, и он приходит как массив объектов.

$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 потоков и просто добавить еще 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(); 
});