Question

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

我会解释更多。

当你运行应用程序时，它只显示表中的25个元素，如果用户想要查看更多元素，它会滚动表格，当它移动到底部时会加载更多数据。
当用户点击标题左侧图标（帐户）“V”和“^”帐户。它将所有对象排序并在屏幕上显示。所有对象均表示以排序的方式显示2000个对象。
所以问题是当用户点击标题左侧图标（帐户）“V”和“^”时，我想只显示排序数组的25个元素，并在用户滚动到底部时加载数据。 / LI>

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。

主要变化是：

添加了limitTo：主ngRepeat的计数器：

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

使计数器成为范围变量
通过删除所有切片，确保$scope.invoice_records始终包含所有记录。

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

1 个答案: