如何在无限滚动中显示仅排序的25个元素？

Question

I am using infinite scroll in my demo ,In which I am showing only 25 element first time .When user scroll down to bottom it load more data and display that more data .It is do repeat steps if user want whole data to display (scroll to bottom load more data).but in my demo there is ascending and descending functionality present .On header there is "V" and "^" Button present .using click of that button I need to ascend and descend data .In my demo it is working fine .But the issue is when user click it load all data but I want it show only 25 data (ascending and descending.)

I will explain more .

• When you run app it show only 25 elements in table if user want to see more it scroll the table it load more data when it move to bottom.
• when user Click header left icon ( Account )"V" and "^" Account .It sorted all the object and display it in screen .All object mean it show 2000 objects in sorted way .
• So the issue is when user click header left icon ( Account )"V" and "^" I want to display only 25 element of sorted array and load data when user scroll to bottom .

HTML

<ion-scroll scrollbar-y="true" ng-style="backGroundImageHeightObj" delegate-handle="invoicegrid">
          <div class="row" ng-repeat="column in invoice_records | orderBy: sortval: reverse track by $index">
            <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
            <div class="col col-10 text-center brd collapse-sm"></div>
          </div>
        </ion-scroll>
        <ion-infinite-scroll immediate-check="false" ng-if="!noMoreItemsAvailable" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>

Answer 1

In the ShowViewAfterSuccess function you slice all invoice records to get just the ones to be displayed:

$scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);

Then, in the setSort function you clear the invoice_records list and then set it with the whole list of invoice records (without slicing the first 25):

$scope.invoice_records=$scope.total_invoice_records;

That's why you get the whole list upon re-sorting.

Ideally, you'd want to get sorted data from the back-end in batches to feed the infinite scroll. Assuming you cannot do that, you can use the limitTo filter to control how many lines are displayed in the ngRepeat. Also, in your setSort you may want to scroll back to the top.

Here's an updated Plunker .

Main changes are:

• Added limitTo: counter to the main ngRepeat:

ng-repeat="column in total_invoice_records | orderBy: sortval: reverse | limitTo: counter track by $index"

• Made counter a scope variable

• Made sure $scope.invoice_records always contains all records by removing all slicing.