Question

我的离子含量中含有离子列表。

这是我的HTML：

<ion-content>
<ion-view>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
    <a class='normala' href="#/tab/dash/{{maanta.id}}">
    <div class='cardHeader item-text-wrap'>
    {{maanta.title}}
    </div>
    <hr class='divi'>
    <div class='cardDivider item-text-wrap'>
    {{maanta.source}} - {{maanta.pub_date}}
    </div>
    <hr class='divi'>
    <div class='cardBody item-text-wrap'>
    {{maanta.summery}} 
    </div>
</a>
</div>    </ion-list>

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

</ion-content>
</ion-view>

这是我的JS：

$scope.limit = 10;
$scope.loadMore = function() {
    $scope.limit +=10
    if ( $scope.maanta.length <$scope.limit) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

问题

当我第一次登陆页面时，无限滚动不会改变我的ng-repeat的限制。当我导航到另一个页面并返回时，无限循环按预期工作。

Answer 1

查看您的HTML。标签序列中存在错误：

<ion-content>
    <ion-list >
        <div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
            <a class='normala' href="#/tab/dash/{{maanta.id}}">
                <div class='cardHeader item-text-wrap'>
                    {{maanta.title}}
                </div>
                <hr class='divi'>
                <div class='cardDivider item-text-wrap'>
                    {{maanta.source}} - {{maanta.pub_date}}
                </div>
                <hr class='divi'>
                <div class='cardBody item-text-wrap'>
                    {{maanta.summery}} 
                </div>
            </a>
        </div>    </ion-list>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>

标签<ion-view>不是必需的。

Answer 2

我认为您应该重新考虑您的方法，并尝试将新内容推送到您的观点。关键是推动新内容。

前例（来自用户DILIP on codepen：）

<ion-infinite-scroll distance="2"
       on-infinite="loadMoreData()"
       ng-if="!moredata"  >
</ion-infinite-scroll>

var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope)
{
$scope.moredata = false;

$scope.loadMoreData=function()
{
    $scope.items.push({id: $scope.items.length});
    if($scope.items.length==100)
    {
        $scope.moredata=true;
    }
  $scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});

这是codepen的链接： http://codepen.io/d4dilip/pen/rkxyA

离子无限滚动，仅在导航离开并返回页面时滚动

2 个答案: