如何排序显示只有25无限滚动的元素？ [英] how to display sorted only 25 element in infinite scroll?

问题描述

我使用无限滚动在我的演示，其中我只显示25元一次。当用户向下滚动到下它装载更多的数据并显示更多的数据。它是做重复步骤，如果用户想整个数据显示（滚动到底装载更多的数据）。但在我的演示有上升和下降功能present。对头有V和按钮，我需要的^键present。采用点击升降。在我的演示它工作正常。但问题的数据，当用户点击它加载所有数据，但我希望它只显示25个数据（升序和降序）。

我将解释更多。

• 当你运行程序的时候，只显示25表中的元素，如果用户希望看到更多的是把它的滚动加载更多的数据表时将其移至底部。


• 当用户点击标题左边图标（帐户）V和^帐户。它排序的所有对象，并在屏幕上显示出来以上的通过率反对的意思是显示排序方式2000对象。


• 所以，问题是，当用户点击标题左边图标（帐户）V和^我想只显示25排序后的数组和加载数据时，用户滚动的元素底部。

HTML

 ＆LT;离子滚动滚动条Y =真吴式=backGroundImageHeightObj委托手柄=invoiceg​​rid＆GT;
          ＆LT; D​​IV CLASS =行NG-重复= |＆GT列invoice_records排序依据：sortval由$指数反向的轨道;
            ＆LT; D​​IV CLASS =COL COL-中心BRD崩溃-SMNG重复=字段column.columnsNG秀=数据[$指数] .checked＆放大器;＆放大器;数据[$指数] .fieldNameOrPath = == field.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;
        ＆所述;离子无限滚动立即检查=假NG-如果=上无限=loadMore（查询）距离=10％＆GTnoMoreItemsAvailable！;＆下; /离子无限滚动＆GT;
 

解决方案

在你切的所有发票记录获取要显示的只是那些在 ShowViewAfterSuccess 功能：

  $ scope.invoice_records = $ scope.total_invoice_records.slice（0，showitems）;
 

然后，在 setSort 功能，您清除 invoice_records 列表，然后用发票的整个列表设置记录（无切片前25）

  $ scope.invoice_records = $ scope.total_invoice_records;
 

这就是为什么你在重新排序整个名单。

在理想情况下，你会想从后端排序的数据分批养活无限滚动。假设你不能做到这一点，您可以使用limitTo过滤器来控制多少行显示在ngRepeat。此外，在你的 setSort 你可能想回到顶端滚动。

下面是一个更新Plunker 。

主要变化如下：

• 新增limitTo：计数器主ngRepeat：

NG-重复=列total_invoice_records |排序依据：sortval：反转| limitTo：由$指数反跟踪

• 柜台制造一个范围变量




• 确信 $ scope.invoice_records 总是通过删除所有切片包含了所有的记录。

I am using infinite scroll in my demo ,In which I am showing only 25 element first time .When user scroll down to bottom it load more data and display that more data .It is do repeat steps if user want whole data to display (scroll to bottom load more data).but in my demo there is ascending and descending functionality present .On header there is "V" and "^" Button present .using click of that button I need to ascend and descend data .In my demo it is working fine .But the issue is when user click it load all data but I want it show only 25 data (ascending and descending.)

I will explain more .

• When you run app it show only 25 elements in table if user want to see more it scroll the table it load more data when it move to bottom.
• when user Click header left icon (Account)"V" and "^" Account .It sorted all the object and display it in screen .All object mean it show 2000 objects in sorted way .
• So the issue is when user click header left icon (Account)"V" and "^" I want to display only 25 element of sorted array and load data when user scroll to bottom .

HTML

<ion-scroll scrollbar-y="true" ng-style="backGroundImageHeightObj" delegate-handle="invoicegrid">
          <div class="row" ng-repeat="column in invoice_records | orderBy: sortval: reverse track by $index">
            <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$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" ng-if="!noMoreItemsAvailable" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>

解决方案

In the ShowViewAfterSuccess function you slice all invoice records to get just the ones to be displayed:

$scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);

Then, in the setSort function you clear the invoice_records list and then set it with the whole list of invoice records (without slicing the first 25):

$scope.invoice_records=$scope.total_invoice_records;

That's why you get the whole list upon re-sorting.

Ideally, you'd want to get sorted data from the back-end in batches to feed the infinite scroll. Assuming you cannot do that, you can use the limitTo filter to control how many lines are displayed in the ngRepeat. Also, in your setSort you may want to scroll back to the top.

Here's an updated Plunker.

Main changes are:

• Added limitTo: counter to the main ngRepeat:

ng-repeat="column in total_invoice_records | orderBy: sortval: reverse | limitTo: counter track by $index"

• Made counter a scope variable

• Made sure $scope.invoice_records always contains all records by removing all slicing.

这篇关于如何排序显示只有25无限滚动的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！