AngularJS中如何获取ng-infinite-scroll执行前的条目总数量？

嘿，我看你遇到了这个小问题——现在页面上显示的@{{data.length}}只会跟着当前可见的条目数变，滚一下加载更多，数字就涨一点对吧？

这是因为你代码里的data是经过limitTo:numberToDisplay过滤后的数组，它的长度自然就是当前显示的条目数量。给你两个解决方案，看你需求来选：

• 如果想显示所有产品的总数量，直接把绑定的变量换成product_data.length就行，代码改成这样：

  @{{product_data.length}} 
  <div infinite-scroll="loadMore()" infinite-scroll-distance="2">
    <div class="col-xs-6 col-sm-6 col-md-4" ng-repeat="item in data=(product_data|limitTo:numberToDisplay) track by $index">
      <!-- 你的条目内容 -->
    </div>
  </div>
  

• 如果想同时展示已加载数量和总数量（比如“10/50”这种效果），就这么写：

  @{{data.length}} / @{{product_data.length}}
  

另外顺便提一嘴，要确保你的loadMore()函数是正确递增numberToDisplay的，比如像下面这样写就很稳妥：

$scope.numberToDisplay = 10; // 一开始先显示10条
$scope.loadMore = function() {
  $scope.numberToDisplay += 10; // 每次滚动加载就多显示10条
};

这样调整后，就能准确显示你想要的数量啦～

内容的提问来源于stack exchange，提问作者S bhardwaj