2017-03-28 6 views
0

Angular.js의 웹 API에서 데이터를 가져 오기 위해 "$ http.get"요청을 사용하고 있습니다.같은 웹 API를 사용하여 데이터를 가져오고 추가하는 방법 Angularjs에서 요청 받기

API URL에는 매개 변수 호출 "pageNo ="가 있으며 과도한 요청로드를 유지하기 위해 각 페이지 번호의 데이터를 검색하려면 해당 매개 변수의 끝에 숫자를 추가해야합니다. 각 페이지에는 레코드 목록이 10 개 있습니다.

범위 변수 ($ scope.pageCount)를 가져 와서 URL과 함께 전달하면 정상적으로 작동하며 한 번에 10 개의 레코드 목록을 검색 할 수 있습니다.

이제 무한 스크롤을 사용하는 것과 같이 나머지 데이터를 아래로 가져 와서 기존 데이터 목록에 추가한다고 가정합니다.

동일한 요청에서 더 많은 데이터를 검색 할 수 있습니까? 응용 프로그램에 '무한 - 스크롤'을 추가하고 아래로 스크롤 할 때 경고 메시지가 나타납니다.

다음은 현재 작동하는 기능입니다.

app.controller('SpotLightCtrl', function ($scope, $http, shareEventID) { 

    $scope.pageCount = 1; 
    $http.get("https://stg.myapi.svc/pageNo="+$scope.pageCount+) 
     .then(function (response) { 
      $scope.data = response.data; 

      $scope.loadMore = function() { 
       alert('Load more records'); 
      }; 

     }); 

}); 

그리고 HTML 코드 : 모든 세부 사항은, 어떤 도움을 주시면 감사하겠습니다 명확하지 않은 경우

<div class="content-block spotlight-listing" ng-controller="SpotLightCtrl" infinite-scroll='loadMore()' infinite-scroll-distance='1'> 
    <h1>Spotlight</h1> 
    <div ng-repeat="event in data.eventList" class="deals-block"> 
     <div class="col-md-4 col-xs-12 img-style"> 
      <a href="/SpotLight-Detail"><img ng-src="{{event.eventPosterImage}}" class="img-responsive img-rounded" /></a> 
     </div> 
    </div> 
</div> 

공유하세요 ...

+0

가 있었다 수있는 문제에 추가됩니다에 SO, 나는 당신이 확인하시기 그것을 고쳐라. – George

+0

오, 내가 바로 – Ajoshi

+0

조지를 확인하게하고, 동일하게 업데이트했습니다. – Ajoshi

답변

2

당신은 함수에서 HTTP 호출을 넣을 수 있으며, pagecount로 함수를 호출하십시오. loadMore 기능이 PAGECOUNT라고

app.controller('SpotLightCtrl', function ($scope, $http, shareEventID) { 

$scope.pageCount = 1; 
$scope.data = []; 
function getData() { 
    $http.get("https://stg.myapi.svc/pageNo=" + $scope.pageCount) 
     .then(function (response) { 
      $scope.data = $scope.data.concat(response.data); 
     }); 
} 

$scope.loadMore = function() { 
    console.log('Loading more records'); 
    ++$scope.pageCount; //page count is incremented by 1, so 
    getData(); 
}; 

getData(); 
}); 

가 하나씩 증가하고, 다음 기록이 당신을 통해 JS 9 사 $ scope.data

+0

감사 ... 감사합니다. – Ajoshi