CODEWITHSUNDEEP
javascriptangularjsionic-framework
Siyah
Siyah

Reputation: 2897

Infinite scroll with ng-if messes up order in ng-repeat

I am using ng-repeat to get some list items. That works. I am also ordering them, based on alphabet. I am doing that like this:

<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>

Now, I added the infinite scroll you can see below. I want to get these items after scrolling. That works as well (although on iOS, it just shows them even before scrolling, but that's a different issue).

I am doing that like this:

$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')
}

The problem is that the initially shown items (the first 10) are just randomly shown and are not obeying the orderBy which is stated in the ng-repeat. So what I want to do, is that it shows me the list items after scrolling while still ordering it as I stated in the ng-repeat.

My question is: how can I do / fix that?

Is there something I am missing in my code? I tried adding it to the ng-if, but that didn't work at all.

Upvotes: 0

Views: 217

Answers (1)

whyyie
whyyie

Reputation: 792

The limitTo should be placed after orderBy (order is important).

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

Upvotes: 1

Related Questions