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

问题描述

我试图做排序的数据演示，并显示table.Actually在我的演示我打一个服务得到了一些数据（2000年）在对象作为一个response.So我在同一时间，用显示器50的对象无限滚动我加载更多的数据这是工作的罚款。我很能当我滚动到底。有buutton我的头^或V。请检查头（左图标V）示例加载更多数据帐户名V是本我的图标，我需要我的排序列。

其实这个问题是目前的它的排序是唯一的 50 元素，它显示在屏幕上。当用户滚动至底部，并加载更多的 50
元素之类的 100 元素，所以on..But是不正确solution.I需要的排序2000元并显示前50个元素（这是从服务来所有的对象）当用户滚动到底它加载更多的50个元素，我们可以在采用了棱角分明的js做

这是我的code

http://plnkr.co/edit/rUxTGDqyrxVq9STdvDTV?p=$p$ PVIEW

 ＆LT;离子滚动滚动条Y =真代表手柄=invoiceg​​ridNG式=viewHeight＆GT;
  ＆LT; D​​IV CLASS =行NG-重复=在invoice_records栏| limitTo：计数器|排序依据：sortval：由$指数反向跟踪纳克级的奇='奇数行'＆GT;
    ＆LT; D​​IV CLASS =山坳BRD崩溃-SMNG重复=字段column.columnsNG秀=invoice_column_name [$指数] .checked＆放大器;＆安培; invoice_column_name [$指数] .fieldNameOrPath ===场.fieldNameOrPath＆GT; {{field.value}}＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL COL-10文本的中心BRD崩溃-SM＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /离子滚动＆GT;
＆所述;离子无限滚动立即检查=假的无限=loadMore（查询）距离=10％＆GT;＆下; /离子无限滚动＆GT;
 

Java脚本的

  $ scope.setSort =功能（IDX，反向）{
    $ scope.sortval ='列['+ IDX +']的值。';
    $ scope.reverse =反转;
  };
 

解决方案

您可以通过从服务的结果调用的顺序：

  $ scope.total_invoice_records = $过滤器（'排序依据'）（data.records，'列['+ IDX +'。值'，真）
 

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)

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