javascript - ng-if 的无限滚动会扰乱 ng-repeat 中的顺序

Question

我正在使用 ng-repeat 来获取一些列表项。这样可行。我也根据字母表对它们进行排序。我这样做是这样的:

<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | limitTo:numberOfItemsToDisplay | orderBy: 'namesAlphabet' as names">
    Display some data
</li> 
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="Schedules.length > numberOfItemsToDisplay"></ion-infinite-scroll>

现在，我添加了无限滚动，您可以在下面看到。我想在滚动后获得这些项目。这也有效(尽管在 iOS 上，它甚至在滚动之前就显示它们，但这是一个不同的问题)。

我这样做是这样的:

$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
    if ($scope.Schedules.length > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 10; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
} 

问题是最初显示的项目(前 10 个)只是随机显示，并且不遵守 ng-repeat 中规定的 orderBy。所以我想做的是，它在滚动后向我显示列表项，同时仍然按照我在 ng-repeat 中所述进行排序。

我的问题是:我该如何做/解决这个问题？

我的代码中是否缺少某些内容？我尝试将其添加到 ng-if 中，但这根本不起作用。

Answer 1

limitTo 应放在 orderBy 之后(顺序很重要)。

<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | orderBy: 'namesAlphabet' | limitTo:numberOfItemsToDisplay">
    Display some data
</li>