Updated Plunker

Question

我正在尝试使用角度js在离子中制作表格视图。但是我有很多数据要显示在 5000对象。在获取数据后我的UI挂起，因为它正在dom上打印数据。所以我想实现延迟加载，这样我只能看到100个元素，或者只有100个元素存在于dom中。当用户滚动它时，下载另外100个对象或元素并删除uppers元素以便我的UI不会挂起。我们可以做在角js 我将告诉你我的UI是如何挂起的。看看我的例子

我的装载机挂了大约5秒钟..

所以我尝试在我的演示中使用无限滚动，这样我一次只能显示100个元素

这是我的无限滚动代码但是我一次也无法显示100个元素我也没有得到任何错误

  <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="canWeLoadMoreContent()" distance="10%">
      <div class="row" ng-repeat="column in _list | orderBy: sortval:reverse | filter: query">
        <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name['index'].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd collapse-sm"></div>
      </div>
      </ion-infinite-scroll>
    </ion-content>

Answer 1

你需要设置一个分页而不是使用无限滚动;或保持无限滚动的功能。

但如果您仍希望使用无限滚动，那么当您将下一个数据加载到.wrapper { @import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css'; }时，在填写新元素之前，请使用var query = { details: {} }; var field = 'first'; query.details[field] = "TEST"; <清除{ details: { first: "TEST" }} / p>

但是你会产生我不知道的副作用，例如： - 如何加载100个第一个元素？ - 页面将从100个元素全部跳转，清理为0，然后填充下一个100.这将导致我认为会产生令人不快的效果

我对ion-infinite的配置如下：

_list

这意味着： - 当用户滚动到达页面高度的最后10％时，加载_list

如果用户从不喋喋不休，那么他只显示第一个数据。

编辑：这是一个更新的plunkr http://plnkr.co/edit/B5KCbc8hr66upCXMvXSR?p=preview

几句话： - 无限滚动指令是独立的，不得超越你的表 - 访问索引是通过$ index完成的，而不是使用'index' - 已修改load functionnality以加载下一个100个元素

_list.length= 0

Answer 2

Updated Plunker

我采取了一种与众不同的方法。

控制器顶部有一个名为showitems的变量。这可以控制您希望一次显示的项目数。计数器变量将跟踪显示多少项目的位置。最初，该值设置为showitems值，因为我们将立即使用ShowViewAfterSuccess函数中的第一个项目预填充数据集。

var showitems = 100;
var counter = showitems;

在ShowViewAfterSuccess函数中，我将数据添加到名为$ scope.total_invoice_records的范围变量中。

接下来，我在数据上运行第一个数组切片。这将根据showitems变量中设置的值将前x个记录传递给$ scope.invoice_records。这会使用第一组记录初始化视图。

$scope.total_invoice_records=data.records;
$scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);

我添加了一个loadMore函数，它只是从总记录集中抓取下一个x个记录，并将它们连接到$ scope.invoice_records中的当前集合，并递增计数器。 loadMore还将检查是否还有更多要加载的记录，并将消息广播到离子无限滚动指令以删除微调器。

  $scope.noMoreItemsAvailable = false;
  $scope.loadMore = function() {
    var next = $scope.total_invoice_records.slice(counter, counter+showitems);
    $scope.invoice_records = $scope.invoice_records.concat(next);
    counter = counter+showitems;
    if (counter>=$scope.total_invoice_records.length) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

最重要的是，请记住将无限滚动元素的immediate-check属性设置为 false ：

<ion-infinite-scroll immediate-check="false" ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

Answer 3

Angular应该使用5000对象，如果它是只读的，则可以使用one time binding

以::开头的表达式被视为一次性表达式。一次性表达式一旦稳定就会停止重新计算，如果表达式结果为a，则在第一次摘要后发生非未定义的值（参见下面的值稳定算法）。

<span ng-bind="::name"></span>

我不知道无限滚动，但如果我必须实现类似的东西，我会使用ng-filter＆＃39;限制＆＃39;。

ng-repeat="column in _list | limit : limitValue"

然后将任何按钮/滚动事件绑定到

$scope.limitValue = $scope.limitValue + "10";

Answer 4

理想情况下，你不应该在1次通话中带来这么多数据。现在，如果你有，你可以通过一个小小的调整来实现这一点。

将数据分成100块，并在$ scope中设置为100。

var brokenData = [];
var totalData = x; // Total 5000 records
var pages = parseInt(totalData.length/100);
if(totalData.length % 100 !== 0) {
    pages += 1;
}
for (var i = 0; i < pages; i++){
    if(i == pages - 1) {
        brokenData.push(totalData);
    } else {
        brokenData.push(totalData.splice(0,100));
    }
}

现在设置

$scope.pages = pages;

第一页或第一次

$scope.pageData = brokenData[0];
$scope.currentPage = 0 + 1;

这将在您的页面上仅显示100条记录，并将当前页面设置为1。

现在您可以选择任何分页工具或绑定窗口滚动事件，只需更新上述两件事

喜欢第二页

$scope.pageData = brokenData[1];
$scope.currentPage = 1 + 1;

如何一次只显示25个元素？

4 个答案:

Updated Plunker