Angularjs 如何一次仅显示25个元素？

我正在尝试使用angular js在ionic中创建表视图。但是我有很多数据要显示在5000对象周围。所以在获得数据后，我的UI挂起，因为它正在dom上打印数据。所以我想实现延迟加载，以便只有100个元素对我可见，或者只有100个元素存在于dom中。当用户滚动下载它时再添加100个对象或元素，删除uppers元素，这样我的UI就不会挂起。我们可以用angular 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>

{{field.value}}

Angular应该适用于5000对象，如果它是只读的，您可以使用

以：：开头的表达式被视为一次性表达式。 一次性表达式稳定后将停止重新计算， 如果表达式结果为 非未定义值（参见下面的值稳定算法）

---

我不知道无限滚动，但如果我必须实现类似的东西，我会使用

ng过滤器

“limit”

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

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

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

---

---

您需要设置分页，而不是使用无限滚动；或者保持无限卷轴的功能不变

但是，如果您仍然希望使用无限滚动，那么当您将下一个数据加载到

\u列表中时，在填充新元素之前，请使用
\u列表清理
\u列表。长度=0

但你会有我不知道的副作用，比如：
-如何加载前100个元素？
-页面将从满100个元素跳转到0，然后填充下100个元素。我想这会导致一种不愉快的影响

我对ion infinite的配置如下：

  <ion-infinite-scroll     
    ng-if="!myModel.maxItemLoaded"
    icon="ion-loading-c"
    on-infinite="loadMoreData()"
    distance="10"
  >

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

将数据分成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));
    }
}

第1页或第1次

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

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

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

喜欢第二页吗

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

我采取了与其他人稍有不同的方法

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

var showitems = 100;
var counter = showitems;

在ShowViewAfterSuccess函数中，我将数据添加到名为$scope.total\u invoice\u records的范围变量中

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

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

我添加了一个loadMore函数，该函数只需从总记录集中获取下一个x数量的记录，并将它们连接到$scope.invoice_记录中的当前集，然后递增计数器。loadMore还将检查是否还有更多记录要加载，并将消息广播到ionic infinite scroll指令以移除微调器

  $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>


如果我给100个限制，那么我将如何显示其他1950对象。我需要显示所有对象我认为您没有给出正确答案。实际上我需要用户滚动，然后加载更多元素，就像ng infinite scroll一样。我从未使用过infinite scroll，但是，如果您将限制绑定到$scope.limit，然后（当您需要更多元素时）当用户移动到表的底部或换言之，移动到最后一行或第二行时，您可以将此值增加100。首先检查我的两个插件，然后查看我挂起UI的问题。两个插件都处于“无限加载”状态在我这边说明什么是加载的最佳方式解决这个问题当数据较大时，我们可以在浏览器上缓慢加载数据，比如先加载100，然后再加载100，然后再加载100。当用户滚动到底部时，我添加了100多个元素，这是更好的方式吗？这就是ion infinite滚动的方式。当您接近框的“底部”时加载数据。我添加了我的作为编辑。那么什么是更好的解决方案呢？你能帮我用无限卷轴加载数据吗..你能检查一下我正在做的第二个Plunk吗？你能告诉Plunk为什么不能吗。给我几分钟不，对不起，我不是在找那个。我知道了。你们的答案很完美。但可能有一种情况，当用户向下滚动并加载5000个对象后加载所有数据。这意味着他将能够看到该容器中的所有对象。在那个时候，应用程序会变慢吗？因为我在dom中使用了5000个元素或对象。我认为这是一种解决方案。但可能有更好的解决方案。我认为如果我使用三个或三个div，更好的解决方案可能是这个。例如“top”、“middle”、“bottom”。在中间div中加载“100”对象。如果用户移动“middle”div的底部，我将中间div的内容交换到top div，并在“middle”中获得新的内容所以用户最多可以看到200个元素。当用户滚动到“中间”的顶部时也是如此div middle div content移动到底部div在middle div上获得新的content。我认为这可能是不可能的。但我认为这是更好的解决方案，因为在DOM中最多只存在200个元素，而不是更多。所以我们的应用程序在任何情况下都运行得很快，我会在优化之前进行测试。在任何情况下，y
  $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');
  };

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