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

一笑奈何 提交于 2019-12-02 22:33:57

问题


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

回答1:


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



回答2:


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

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


来源:https://stackoverflow.com/questions/30736293/how-to-display-sorted-data-from-complete-object-in-angular-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!