how to display sorted data from complete object in angular js?

Question

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

Probably should spend a little time separating all that text out, it's a bit much to read — Callum Linington
– Callum Linington, Commented Jun 9, 2015 at 15:24
You should probably implement this logic on the server side. — ShankarSangoli
– ShankarSangoli, Commented Jun 9, 2015 at 15:31

sylwester · Accepted Answer · 2015-06-09 16:29:12Z

0

Just change order of limitTo and orderBy in your repeater

orderBy: ... | limitTo : ...

 <div class="row" ng-repeat="column in invoice_records |  orderBy: sortval:reverse track by $index | limitTo: counter " ng-class-odd="'odd-row'">

edited Jun 9, 2015 at 16:29

answered Jun 9, 2015 at 15:53

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pallavi Sharma Over a year ago

could you please give plunker

Pallavi Sharma Over a year ago

you did not get my question I only want 50 element to display . you display 2000 element in one sort

sylwester Over a year ago

@PallaviSharma please look here plnkr.co/edit/B8OoGxjBrG6RY1tvAb4t?p=preview

Joao Leal · Accepted Answer · 2015-06-10 00:58:56Z

0

You can call the order by on the results from your service:

$scope.total_invoice_records = $filter('orderBy')(data.records, 'columns['+idx+'].value', true)

answered Jun 10, 2015 at 0:58

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

how to display sorted data from complete object in angular js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related