Ionic Pagination Start

Question

Ich versuche, eine Seitennummerierung Feature erstellen, aber ich fühle mich festgefahren. Ich bin nicht sicher, ob ich auf dem richtigen Weg bin ...

meiner Meinung nach, ich habe eine ng-repeat = "res in Folge", und am Ende der Seite i platziert folgenden:

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

dann in der Steuerung, habe ich folgendes:

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

    } 

jeweils Seiten gibt einen json 15 Elemente enthält. Was ich tun möchte, ist, wenn ich das Ende erreiche, möchte ich die nächsten 15 in das Ergebnis geladen werden, um angezeigt zu werden.

Answer 1

Sie müssen die nächsten 15 Artikel in loadMore Funktion in der Steuerung holen, wie Sie on-infinite="loadMore()" in ion-infinite-scroll

Write-Funktion schreiben, wie in Ihrem Controller folgen

$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

Hears, wie ich umgesetzt haben infinite-scroll in meiner App

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

loadPeople() lädt alle gescrollt Daten, es ist Code unten ist

$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"); 

    }; 

auch ich das gleiche Problem wie Sie aus irgendeinem Grund .push() hatte nicht funktioniert, so habe ich diese Abhilfe.

Ich nahm die data geprüft, ob es in if(data.length > 0){} nicht null ist und verwendet dann .concat(newPeople) sie zu fusionieren und verwendet schließlich arrayUnique($scope.temp, 'id'), um sicherzustellen, dass es keine doppelte Einheit ist.

Es ist auch eine gute Idee zu verwenden ng-if="!loadMorePeople" es hilft, den Anruf zu stoppen, wenn keine Daten übrig bleiben, sonst wird der Anruf kontinuierlich fortgesetzt.

Ich hoffe, dass dies Ihr Problem löst. Lassen Sie mich wissen, wenn Sie Hilfe brauchen: D