How To Display Sorted Only 25 Element In Infinite Scroll?

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 repe

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