AngularJS中如何限制{{$index}}仅循环一次而非每次重复？

嘿，我之前做AngularJS项目时刚好碰到过一模一样的需求——不想让内层ng-repeat的索引每次都从1重新开始，而是要所有内层项共用一个连续的计数对吧？其实核心思路就是把索引的计数从内层的局部作用域抽出来，变成全局可共享的变量，或者直接在数据预处理阶段给每条数据加上全局序号，下面给你两种靠谱的实现方式：

方法一：预处理数据（推荐） #

这种方式最稳妥，不会受AngularJS digest循环的影响，性能也更好。你只需要在控制器里遍历reports数据，给每个内层的data对象添加一个全局序号字段：

// 在你的AngularJS控制器中
$scope.reports = { /* 你的原始数据 */ };
let globalCounter = 0;

// 遍历所有外层和内层数据，添加全局序号
angular.forEach($scope.reports, function(value) {
  angular.forEach(value, function(dataItem) {
    // 每次循环递增计数器，赋值给dataItem的自定义字段
    dataItem.globalSequence = ++globalCounter;
  });
});

然后在模板里直接使用这个预先生成的序号字段，替换原来的{{$index+1}}：

<div ng-repeat="(key, value) in reports" class="all_report_admin">
  <div class="name">{{key}}</div>
  <div ng-repeat="data in value" class="all_report">
    <div class="date">{{data.globalSequence}}</div>
    <div class="status">{{data.status}}</div>
  </div>
</div>

这个方法的优势在于：序号只计算一次，不管DOM怎么渲染或者数据有没有小更新（只要不是完全替换数据集），序号都不会乱；而且逻辑清晰，后续维护起来也方便。

方法二：使用父作用域计数器结合ng-init #

如果你不想修改原始数据，可以在父作用域定义一个计数器，然后在内层ng-repeat里用ng-init来递增它：

首先在控制器里初始化计数器：

// 在你的AngularJS控制器中
$scope.globalCounter = 0;

然后修改模板：

<div ng-repeat="(key, value) in reports" class="all_report_admin">
  <div class="name">{{key}}</div>
  <div ng-repeat="data in value" class="all_report" ng-init="currentSeq = ++globalCounter">
    <div class="date">{{currentSeq}}</div>
    <div class="status">{{data.status}}</div>
  </div>
</div>

注意事项 #

• 如果你的reports数据会被完全替换（比如重新请求后端数据），记得在更新数据前把$scope.globalCounter重置为0，不然序号会继续累加；
• ng-init只会在元素第一次渲染的时候执行一次，所以只要DOM元素不被销毁重建，就不会重复递增计数器，这点可以放心。

内容的提问来源于stack exchange，提问作者My testing