loadMore для angularjs в ajax запросе help please!

151

16 декабря 2018, 00:10

Доброго времени суток всем. Хотел спросить, как реализовать кнопку loadMore для данных, полученных при ajax запросе.

Вот мой html кусочек, с которого начинается цикл вывода данных.

...
<div class="row" ng-repeat="item in data | orderBy: '-created_at' | limitTo: 5">
...
<button class="btn btn-danger" ng-click="loadMore()">LoadMore</button>

Вот мой запрос GET на удаленный api.

    $http({
    method : "GET",
    url : "http://frontend-test.pingbull.com/pages/paveligorevich55@icloud.com/comments",
    params : {
        'count' : $scope.n,
        'offset' : 0
    }
}).then(function (response) {
    $scope.data = response.data;
    $scope.n = response.data.length;
    $scope.loadMore = function(){
        $scope.n = $scope.n + 5;
    }; 
    console.log(response.data.length);
});

Поправьте пожалуйста - если есть что то не правильное синтаксически или симатически. Вот что выдает консоль console.log(response);

Answer 1

Общий смысл такой: при получении новых данных записывайте их в $scope.data.

Пример кода:

angular.module('myApp', []) 
  .controller('myCtrl', function($scope, MyService) { 
    $scope.offset = 0; 
    $scope.data = []; 
    // Загружаем 15 комментов при загрузке контроллера 
    loadComments($scope.offset); 
 
    $scope.loadMore = function() { 
      $scope.offset += 15; 
      // Загружаем 15 при нажатии на кнопку 
      loadComments($scope.offset); 
    }; 
 
    function loadComments(offset) { 
      return MyService.getComments(15, offset).then(function(res) { 
        $scope.data = $scope.data.concat(res.data); 
      }); 
    } 
  }) 
  .service('MyService', function($http) { 
    return { 
      getComments: function(count, offset) { 
        return $http({ 
          method: "GET", 
          url: "http://frontend-test.pingbull.com/pages/paveligorevich55@icloud.com/comments", 
          params: { 
            'count': count, 
            'offset': offset 
          } 
        }); 
      } 
    } 
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="myApp"> 
  <div ng-controller="myCtrl"> 
    <div class="row" ng-repeat="item in data | orderBy: '-created_at' | limitTo: 5"> 
      {{item|json}} 
    </div> 
    <button class="btn btn-danger" ng-click="loadMore()">LoadMore</button> 
  </div> 
</div>