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

Question

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

我会解释更多。

• 当您运行应用程序时，它仅在表格中显示 25 个元素，如果用户想查看更多元素，则可以滚动表格，并在移动到底部时加载更多数据。
• 当用户点击标题左侧图标(帐户)“V”和“^”帐户时。它对所有对象进行排序并将其显示在屏幕上。所有对象均表示它以排序方式显示 2000 个对象。
• 所以问题是，当用户单击标题左侧图标(帐户)“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="total_invoice_records 中的列 | orderBy: sortval: reverse | limitTo: counter track by $index"

• 使计数器成为范围变量

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