如何在無限滾動中顯示僅排序的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您可能需要滾動回到頂部。

這是更新的Plunker 。

主要變化是：

• 增加了limitTo：與主要ngRepeat的計數器：

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

• 計數器范圍變量

• 通過刪除所有切片，確保$scope.invoice_records始終包含所有記錄。