AngularJS加载更多功能

Question

所以我试图增加负载 function.I 我正在从 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 是用于偏移的变量，在单击按钮后它会递增并用于获取新的 streams.So 当我单击按钮时它会删除旧的 9 个流并加载新的 9 streams.I 想要保留我以前的 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();
});

AngularJS加载更多功能

AngularJS Load more function

javascript

api

jquery

loading

angularjs