如何在无限滚动中仅显示排序的 25 个元素？

Question

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

我会解释更多。

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

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>

Answer 1

在 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 中，您可能需要滚动回顶部。

这是updated Plunker。

主要变化是：

• 为主要的 ngRepeat 添加了 limitTo：计数器：

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

• 将计数器设为范围变量

• 通过删除所有切片确保 $scope.invoice_records 始终包含所有记录。