带有http获取数据的Ionic Framework无限滚动答案

【问题标题】：Ionic Framework infinite scroll with http get data带有http获取数据的Ionic Framework无限滚动
【发布时间】：2014-10-16 21:37:09
【问题描述】：

我刚刚开始使用 ionic 框架（非常棒），而且我是 Angular 的新手。我有一个正在运行的 Web 服务，并且该应用程序应该加载数据。我已经设法检索数据，WordPress REST API 正在以页面的形式发送数据，我不知道如何使用标签上的infinite-scroll 来实现这一点，这是我的 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();
  });
}

第二个函数会加载数据，但不会将其附加到原始数据中。感谢您的宝贵时间。

附：我已经查看了许多 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 是错误的，我只是找不到附加方法。

【问题讨论】：

好的，我设法缩小了问题范围。现在我得到了数据，但是新数据替换了旧数据，函数 MyController($scope, $http) { $scope.posts = []; $scope.page=1; $scope.loadMore = function() { $http.get('wallweight.com/api/… { $scope.posts=items.posts; console.log(items.posts); $scope.$broadcast('scroll.infiniteScrollComplete'); console.log($scope.page); $scope.page +=1; }); };我知道 $scope.posts = items.posts 是错误的，我只是找不到附加方法

标签： javascript jquery wordpress angularjs ionic-framework

【解决方案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;
    });
  };

【讨论】：

【解决方案2】：

试试

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

改为

$scope.posts=items.posts;

【讨论】：

【解决方案3】：

评论这一行 //$scope.newsletters.push(data); 它将整个数据添加为另一个项目。

【讨论】：

【解决方案4】：

感谢这为我节省了几个小时。

我修改了我的工厂以使用 $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 个项目的底部得到了一个额外的空白项目。

【讨论】：