離子框架與http獲取數據的無限滾動

Question

我剛開始使用離子框架（輝煌），我是新的角度。我有一個Web服務正在運行，應用程序應該加載數據。我設法檢索數據，放，WordPress的休息API是發送頁面的形式的數據，我不知道如何實現與無限滾動選項卡上，這是我的HTML標記：

<ion-view title="All Wallpapers"> 
    <ion-content ng-controller="MyCtrl"> 
    <div class="row" > 
    <div ng-controller="PostsController" > 
     <div ng-repeat="post in posts"> 
      <div class="col col-50"> 
        <div class="list card"> 
          <div class="item item-image"> 
          <img ng-src="{{post.thumbnail}}"></> 
          </div> 
          <a class="item item-icon-left assertive" href="#"> 
          <i class="icon ion-android-image"></i> 
          {{post.thumbnail_images.full.width}} x {{post.thumbnail_images.full.height}} 
          </a> 
        </div> 
      </div> 
    </div> 
    </div> 
    </div> 
    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll> 
</ion-content> 
</ion-view> 

在我apps.js我有：

wallweight.controller('PostsController', function($scope, $http) { 
    $scope.page = 1; 

    var url='http://wallweight.com/api/get_recent_posts?page'; 
    $http.get(url). 
    success(function(data, status, headers, config) { 

     $scope.posts = data.posts; 
     console.log(data); 
    } 
). 


    error(function(data, status, headers, config) { 

    }); 


}); 
function MyCtrl($scope, $http) { 
    $scope.posts = []; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page=2').success(function(items) { 
     $scope.posts.push($scope.posts.items); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }); 
    }; 

    $scope.$on('$stateChangeSuccess', function() { 
    $scope.loadMore(); 
    }); 
} 

第二個功能無法加載數據，但它不附加到原始數據。 謝謝你的時間。

PS，我的觀點很多codepen的例子，但是，我似乎無法讓他們的工作..

編輯：

好吧，我已經成功地縮小了疑難問題濫用控制器 現在我得到的數據，但新數據替換舊數據，

function MyController($scope, $http) { 
    $scope.posts = []; 
    $scope.page=1; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) { 
     $scope.posts=items.posts; 
     console.log(items.posts); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     console.log($scope.page); 
     $scope.page +=1; 
    }); 
    }; 

我明白$ scope.posts = items.posts是錯誤的，我只是不能找到一種方法將其追加

Answer 1

明白了吧:)

function MyController($scope, $http) { 
    $scope.posts = []; 
    $scope.page=1; 
    $scope.loadMore = function() { 
    $http.get('http://wallweight.com/api/get_recent_posts?page='+$scope.page).success(function(items) { 
    var i = items.posts.length; 
    $scope.posts = $scope.posts.concat(items.posts); 
    $scope.posts.push(items); 
     console.log(items.posts[0]); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
     console.log($scope.page); 
     $scope.page +=1; 
    }); 
    }; 

Answer 2

謝謝，這節省了我的時間。

我修改了礦用$resource爲我廠的工作，但它本質上是相同的......

$scope.loadMore = function() { 
    moreNewsletters = WPFactory.query({ 
     'page' : $scope.pageNum, 
    'filter[posts_per_page]': 10, 
    param1: 'posts', 
    'filter[cat]': 8, 
    'filter[orderby]': 'ID', 
    }, function(data,responseHeaders) { 

     angular.forEach(moreNewsletters, function(value, key) { 
     value.image1 = ThumbnailFactory.getThumbnail(value.content); 
    }); 

var i = data.length; 
$scope.newsletters = $scope.newsletters.concat(data); 
$scope.newsletters.push(data); 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
    $scope.pageNum +=1; 
    });  
}; 

雖然我在10個項目獲得底部一個額外的空白項目。

Answer 3

評論此行//$scope.newsletters.push(data）; 它作爲另一項添加完整的數據。

Answer 4

嘗試

$scope.posts = $scope.posts.concat(items.posts); 

代替

$scope.posts=items.posts;