이오 페이지 매김 시작

Question

페이지 매기기 기능을 만들려고하고 있지만 막혔습니다. 나는

내보기에

, 나는 "결과에 고해상도"= NG 반복을 가지고 ... 내가 곧 정상 궤도에 오전 확실하지 않다, 페이지의 끝에서 나는 다음과 같은 위치 :

을

var i=1; 
    $http.get("http://website/search/"+i).success(function(response){ 
     i++; 
    $scope.result=(response) 
    }); 

    } 

각 페이지 (15 개) 요소를 포함하는 JSON을 반환

<ion-infinite-scroll on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> 

는 컨트롤러에, 나는이를 썼다. 내가하고 싶은 일은 내가 마지막에 도달했을 때, 다음 15 개의 결과를 표시하고 싶습니다. 컨트롤러에 따라 당신이 on-infinite="loadMore()"

ion-infinite-scroll에 쓰기 기능을 쓰기로

Answer 1

당신은

$scope.result = []; 
var i=1; 
$scope.loadMore = function(){ 
    $http.get("http://website/search/"+i).success(function(response){ 
     i++; 
     $scope.result.push(response); 
    }); 
} 

Check Example

Answer 2

내가 구현하는 방법을 경청한다 컨트롤러 loadMore 기능에 다음 15 항목을 가져가 내 앱의 infinite-scroll

<ion-infinite-scroll ng-if="!loadMorePeople" on-infinite="loadPeople()" distance="1%"></ion-infinite-scroll> 

loadPeople() 부하 모든 스크롤 데이터, 그것이 내가 너무 몇 가지 이유 .push 당신과 같은 문제가 있었다

$scope.loadMorePeople=false; 


$scope.loadPeople = function() { 

     if($scope.peoples != null){ 

      $http({ 
       method: "get", 
       url: baseUrl+"company-members?page="+$scope.pagePeople, 
       withCredentials: true, 
       headers: { 
       'Accept' : 'application/json, text/plain, */*', 
       'Authorization' : ''+window.localStorage.getItem("token_type")+' '+window.localStorage.getItem("token") 
       } 
      }) 
       .success(function(data) { 

        if(data.length > 0){ 

         var newPeople = data; 
         $scope.temp = $scope.peoples.concat(newPeople); 
         $scope.peoples = arrayUnique($scope.temp, 'id'); 

         function arrayUnique(collection, keyname) { 
          var output = [], 
           keys = []; 

          angular.forEach(collection, function(item) { 
           var key = item[keyname]; 
           if(keys.indexOf(key) === -1) { 
            keys.push(key); 
            output.push(item); 
           } 
          }); 
          return output; 
         }; 

         ++$scope.pagePeople; 
         $scope.$broadcast("scroll.infiniteScrollComplete"); 

        }else{ 
         $scope.loadMorePeople=true; 
         $scope.$broadcast("scroll.infiniteScrollComplete"); 
        } 

       }) 
       .error(function(data, status) { 
       }); 
      } 

      $scope.$broadcast("scroll.infiniteScrollComplete"); 

    }; 

코드가 울부 짖는 소리이다()의 그렇게 작동하지 않는 나는이 해결 방법을했다.

가 나는 if(data.length > 0){}에서 null이 아닙니다 경우 data 체크했다 한 다음 병합 .concat(newPeople)을 사용하고 마지막 중복 실체가 없다는 것을 확인하기 위해 arrayUnique($scope.temp, 'id')을 사용했다.

ng-if="!loadMorePeople"을 사용하는 것이 좋습니다. 데이터를 가져올 데이터가 없으면 통화를 계속할 수 있습니다. 그렇지 않으면 통화가 계속 진행됩니다.

이 방법으로 문제가 해결되기를 바랍니다. 도움이 필요한 경우 알려주십시오. D