нагрузки Далее в угловых

Question

У меня есть следующий Угловой и HTML код:

<script type="text/javascript"> 

    var application = angular.module('Application', []); 

    application.service('ImageService', function ($http) { 
    return { 
     GetList: function() { 
     return $http.get('api/images'); 
     }, 
    } 
    }); 

    application.controller('ImageController', function ImageController($scope, ImageService) { 

    ImageService.GetList() 
     .success(function (data, status, headers, config) { 
     $scope.images = data; 
     }) 
     .error(function (data, status, headers, config) { }); 
    }); 

</script> 

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery"> 
    <div data-ng-repeat='image in images' class="image"> 
    <img src="{{image.Url}}" alt="" /> 
    </div> 
</div> 

вызов API возвращает следующее:

[ 
    {"Key":"89207","Url":"http://somedomain.com/image89207.jpg"}, 
    {"Key":"12321","Url":"http://somedomain.com/image12321.jpg"}, 
    {"Key":"23434","Url":"http://somedomain.com/image23434.jpg"} 
] 

Я хотел бы загрузить следующую страницу, когда пользователь прокручивается до конца страницы или когда нажимает кнопку «Показать больше».

мне нужно вернуться на моем JSON величина NextPage ...

Дело в том, что если текущая страница «233», то следующая страница может быть «4545».

Я думаю, что API, возможно, потребуется вернуть следующее значение страницы и список изображений.

Как я могу это сделать?

Answer 1

Я согласен с pankajparkar. Вы должны обработать кнопку «показать больше», загрузить больше изображений и присоединиться к ней с помощью $ scope.images. ng-repeat выполнит оставшуюся работу. Вот пример кода

<script type="text/javascript"> 
    var application = angular.module('Application', []); 

    application.service('ImageService', function($http) { 
     return { 
     GetList: function(page) { 
      return $http.get('api/images', { 
      params: { 
       page: page 
      } 
      }); 
     }, 
     } 
    }); 

    application.controller('ImageController', function ImageController($scope, ImageService) { 

     var page = 0; 

     $scope.images = []; 

     var load = function() { 
     ImageService.GetList(page) 
      .success(function(data, status, headers, config) { 
      $scope.images = $scope.images.concat(data); 
      }) 
      .error(function(data, status, headers, config) {}); 
     }; 

     load(); 

     $scope.loadMore = function() { 
     page++; 
     load(); 
     } 
    }); 
    </script> 

    <div data-ng-app="Application" data-ng-controller="ImageController" class="gallery"> 
    <div data-ng-repeat='image in images' class="image"> 
     <img src="{{image.Url}}" alt="" /> 
    </div> 
    <div> 
     <button ng-click="loadMore()">load more</button> 
    </div> 
    </div>