2016-07-11 4 views
0

ページ設定機能を作成しようとしていますが、気になりません。私は...私の見解でイオニックページネージング開始

私は正しい軌道に乗っていますかどうかわからないです、私はNG・リピート=「結果でRES」を持っている、とページの最後に、私は次のように置か:

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

は、コントローラに、私はこれを書いた:

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

    } 

各ページ15個の要素を含むJSONを返します。私がやりたいことは、私が最後に到達したときに表示される結果に次の15をロードすることです。

答えて

0

あなたのコントローラに従うよう

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

Check Example

+0

それは動作しません、私はconsoled.loggedすべて。それはプッシュしていないようです:/ –

+0

リンクで指定された例を確認し、これに従ってみてください –

0

は私が実装しているか聞こえるあなたはon-infinite="loadMore()"

ion-infinite-scrollでの書き込み機能を書いて、コントローラで loadMore機能で次の15項目を取得する必要があります infinite-scroll in私のアプリ

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

    }; 

コードが怒鳴るあるのです()は働いていなかった私は、この回避策をしました。

私はdataはそれがif(data.length > 0){}にnullではない場合にチェックし、それらをマージする.concat(newPeople)を使用し、最終的に重複実体がないことを確認するarrayUnique($scope.temp, 'id')を使用しました。

ng-if="!loadMorePeople"を使用することをお勧めします。それ以外の場合は、データが残っていなければコールを停止し、コールが継続的に行われるようにします。

これがあなたの問題を解決することを願っています。あなたが助けが必要なら私に知らせてください:D