在离子框架中使用 $http 无限滚动答案

【问题标题】：Infinite scroll with $http get in ionic framework在离子框架中使用 $http 无限滚动
【发布时间】：2015-06-12 08:50:18
【问题描述】：

我只需要在我的应用程序中做一个 ajax 无限滚动，所以我在 ionic 框架中使用了无限滚动。

我的 jquery 控制器代码。

$scope.moredata = false;
$scope.page = 1;
$scope.loadMoreData=function()
{
  $http.get('someurl?page='+$scope.page).
    success(function(data, status, headers, configure) {
        $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.page += 1;
        $scope.product = data;
    }).
    error(function(data, status, headers, config) {
        alert("error");
    });
};

我的 html 代码。

<ion-content>
    <ion-list>
        <ion-item class="item item-thumbnail-left" ng-repeat="(key,value) in product" href="#/app/playlists/{{playlist.id}}">
            <img ng-src={{value.image_url}}>
            <h2>{{value.name}}</h2>
            <p>Sku : {{value.sku}}</p>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll distance="20%" on-infinite="loadMoreData()" ng-if="!moredata"></ion-infinite-scroll>
</ion-content>

当我使用上面的代码时，我从服务器获取 page1 值并将其添加到我的 ion-list 中，但是当我向下滚动 page2 请求发送并且我得到响应但未添加列表视图时，它是覆盖的，也是滚动事件不会停止它对 page3、page4 等的调用，而不会到达屏幕末尾。

任何人都可以帮助我如何使用 ionic 框架中的无限滚动以逐页方式从服务器动态获取数据，并在最后滚动时附加响应。

提前致谢。

【问题讨论】：

你在哪里测试这个？模拟器，浏览器（是否有波纹？），直接在设备上？
我正在模拟器中测试它
在项目文件夹中启动ionic serve（通过控制台）。它会在浏览器中启动它。我们会看到帽子发生的艰难
当我在 Firefox 浏览器中使用 ionic serve 时出现跨源错误：/
你能把控制台输出的内容放在这里吗？

标签： cordova ionic-framework ionic ngcordova

【解决方案1】：

你的问题出在那一行：

  $scope.product = data;

您不是在合并结果，而是在覆盖您的结果。由于我不知道您的数据是如何构建的，因此很难向您推荐一种合并方法

您可以在此处查看该帖子以获得一些建议：https://stackoverflow.com/a/17243064/3687474

【讨论】：