如何在angular js中显示来自完整对象的排序数据? [英] how to display sorted data from complete object in angular js?

问题描述

我正在尝试制作排序数据的演示并在表上显示.实际上，在我的演示中，我正在访问一个服务，其中有一些数据 (2000) 个对象作为响应.所以我一次显示 50 个对象并使用无限滚动我加载了更多工作正常的数据.当我滚动到底部时我能够加载更多数据.我的标题^"或V"上有按钮.请检查标题(左图标V")示例帐户名V"" 使用这个 I 图标，我需要对我的列进行排序.

实际上问题是当前它对屏幕上显示的唯一 50 元素进行排序.当用户滚动到底部并加载更多 50element 它对 100 元素进行排序等等......但这不是正确的解决方案.我需要对 2000 个元素进行排序(所有来自服务的对象)并显示前 50 个元素当用户滚动到底部时，它会加载更多 50 个元素，我们可以使用 angular js 来做

这是我的代码

http://plnkr.co/edit/rUxTGDqyrxVq9STdvDTV?p=preview

<div class="row" ng-repeat="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>

</ion-scroll><ion-infinite-scroll立即检查="false" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>

Java 脚本

 $scope.setSort = function(idx, reverse){$scope.sortval = 'columns['+idx+'].value';$scope.reverse = 反向；};

解决方案

您可以根据服务的结果调用 order by:

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

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

解决方案

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

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

这篇关于如何在angular js中显示来自完整对象的排序数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！