Question

所以我试图让load更多功能。我从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个流并且每次点击按钮时再添加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加载更多功能

2 个答案: