如何在AngularJS的ng-repeat中实现计数器？适配多表格场景

嘿，刚好我之前也处理过类似的Angular表格生成需求，关于在ng-repeat里加计数器的问题，给你几个实用的方案：

1. 直接用Angular内置的$index变量（最省心） #

Angular的ng-repeat自带了$index变量，它会自动追踪当前循环的索引（从0开始）。如果你的表格是直接基于tableTypes数组（比如['工作活动表', '学习活动表']这类）循环生成的，直接用它就行：

<!-- 外层循环生成多个表格 -->
<div ng-repeat="tableType in tableTypes">
  <!-- 用$index+1让计数从1开始 -->
  <h2>第{{$index + 1}}个表格：{{tableType}}</h2>
  
  <table border="1">
    <thead>
      <tr>
        <!-- 这里循环生成日期对应的TH标签 -->
        <th ng-repeat="day in getDaysOfCurrentMonth()">{{day}}号</th>
      </tr>
    </thead>
    <tbody>
      <!-- 仅当月份有数据时生成行 -->
      <tr ng-repeat="monthData in getMonthData(tableType)" ng-if="monthData.hasRecords">
        <td>{{monthData.monthName}}</td>
        <td ng-repeat="activity in monthData.days">{{activity || '-'}}</td>
      </tr>
    </tbody>
  </table>
</div>

说明：$index是当前循环项在数组里的位置，默认从0起步，所以加1就能得到从1开始的计数。如果你的tableTypes已经是过滤后的（只有存在数据的表格类型才在数组里），那这个索引完全对应实际生成的表格顺序。

2. 自定义计数器（适合复杂逻辑） #

如果你的计数需要自定义起始值（比如从5开始），或者要跳过某些不符合条件的表格，那可以在控制器里维护一个计数器变量，配合ng-init来使用：

第一步：在控制器里初始化计数器 #

angular.module('yourApp').controller('YourController', function($scope) {
  // 初始化计数器，比如从1开始
  $scope.tableCounter = 0;
  
  // 其他业务逻辑：获取tableTypes、处理活动数据等
  $scope.tableTypes = ['工作活动表', '学习活动表'];
  // ...
});

第二步：在模板里用ng-init递增计数器 #

<div ng-repeat="tableType in tableTypes" ng-init="tableCounter = tableCounter + 1">
  <h2>第{{tableCounter}}个表格：{{tableType}}</h2>
  
  <!-- 表格内容同上 -->
  <table border="1">
    <!-- ... -->
  </table>
</div>

小提示：如果用ng-if在ng-repeat内部过滤表格（比如只生成有数据的表格），记得把ng-init放在ng-if的外层，不然计数器会跳过被过滤的项，刚好符合你的需求——只有生成表格的时候才递增计数。

3. 处理嵌套循环的计数器 #

如果你的表格内部还有ng-repeat（比如月份行的循环），要区分外层表格的计数器和内层行的索引，直接用$index会混淆，这时候可以给外层计数器起别名：

<div ng-repeat="tableType in tableTypes track by $index" ng-init="tableNum = $index + 1">
  <h2>表格{{tableNum}}：{{tableType}}</h2>
  
  <table border="1">
    <tbody>
      <!-- 内层循环用$index，外层用tableNum区分 -->
      <tr ng-repeat="monthData in getMonthData(tableType)" ng-if="monthData.hasRecords">
        <td>第{{$index + 1}}行：{{monthData.monthName}}</td>
        <!-- ... -->
      </tr>
    </tbody>
  </table>
</div>

注意事项 #

• 如果用ng-if在ng-repeat内部，它会创建新的作用域，这时候如果要访问外层的$index，需要用$parent.$index，不过更推荐用ng-init把外层索引存成变量，避免作用域问题。
• 要是你用的是AngularJS 1.3+，可以用track by来优化循环性能，比如ng-repeat="tableType in tableTypes track by tableType.id"，同时不影响计数器的使用。

内容的提问来源于stack exchange，提问作者AJ-