如何在无限滚动中仅显示排序的 25 个元素? [英] how to display sorted only 25 element in infinite scroll?

问题描述

我在演示中使用无限滚动，其中我第一次只显示 25 个元素.当用户向下滚动到底部时，它会加载更多数据并显示更多数据.如果用户想要整个数据，则重复步骤显示(滚动到底部加载更多数据).但在我的演示中存在升序和降序功能.在标题上有V"和^"按钮存在.使用该按钮的单击我需要升序和降序数据.在我的演示工作正常.但问题是当用户单击它时加载所有数据，但我希望它只显示 25 个数据(升序和降序.)

我会解释更多.

• 当您运行应用程序时，它只会在表格中显示 25 个元素，如果用户想要查看更多内容，它会滚动表格，当它移动到底部时会加载更多数据.
• 当用户点击左上角的图标(帐户)V"和^"帐户.它对所有对象进行排序并显示在屏幕上.所有对象意味着它以排序方式显示 2000 个对象.
• 所以问题是当用户单击标题左侧图标(帐户)V"和^"时，我只想显示排序数组的 25 个元素并在用户滚动到底部时加载数据.

HTML

<div class="row" ng-repeat="invoice_records 中的列 | orderBy: sortval: 按 $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>

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

解决方案

在 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.

主要变化有:

• 向主要 ngRepeat 添加了 limitTo:计数器:

ng-repeat="total_invoice_records 中的列 | orderBy: sortval: reverse | limitTo: counter track by $index"

• 使计数器成为作用域变量

• 通过删除所有切片确保 $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屋！