I am trying to make demo of sorted data and display on table.Actually In my demo I am hitting a service got some data (2000) objects in that as a response.So I am display 50 objects at one time and using infinite scroll I load more data which is working fine .I am able to load more data when I scroll to bottom .There is buutton on my header "^" or "V" .Please check on header (left icon "V") Example "Account Name "V"" Using this I icon I need to sort my column .
Actually The issue is current it sorting the only 50 element which is display on screen .When user scroll to bottom and load more 50 element it sort 100 element so on..But it is not correct solution.I need to sort 2000 element (all object which is coming from service) and display first 50 elements and when user scroll to bottom it load more 50 elements can we do in using angular js
here is my code
http://plnkr.co/edit/rUxTGDqyrxVq9STdvDTV?p=preview
<ion-scroll scrollbar-y="true" delegate-handle="invoicegrid" ng-style="viewHeight">
<div class="row" ng-repeat="column in invoice_records | limitTo: counter | orderBy: sortval:reverse track by $index" ng-class-odd="'odd-row'">
<div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name[$index].checked && invoice_column_name[$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" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>
Java script
$scope.setSort = function(idx, reverse){
$scope.sortval = 'columns['+idx+'].value';
$scope.reverse = reverse;
};
