AngularJS中如何用ng-repeat将多组动态列表按列渲染为表格

API 探路者

2026-10-6

实现方案

完全可以通过ng-repeat实现，不需要转换原有数据结构，调整遍历逻辑即可。

核心思路

HTML表格本身是按行组织的，我们只需要按索引遍历其中一列的长度，每一行分别取三个数组对应索引的内容即可，不需要修改原有的三个独立列表的结构。

你之前的代码问题在于：遍历的是外层tableau数组的3个对象，只会生成3行，且每个item只有一个属性（要么是ws要么是days要么是tnq），所以会出现取值为空、所有值挤在一起的问题。

完整代码示例

<table cellpadding="20" rules="GROUPS" frame="BOX">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <!-- 动态遍历dayslist生成表头 -->
      <th 
        ng-repeat="day in ctrl.tableau[1].days track by $index" 
        class="xl154" 
        style="width: 100px"
      >
        {{day}}
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 按索引遍历wslist的长度生成行，track by $index优化高频刷新性能 -->
    <tr ng-repeat="item in ctrl.tableau[0].ws track by $index">
      <!-- 第一列取wslist对应索引的元素 -->
      <td class="xl153">{{ctrl.tableau[0].ws[$index]}}</td>
      <!-- 第二列取tnqlist对应索引的元素 -->
      <td class="xl153">{{ctrl.tableau[2].tnq[$index]}}</td>
    </tr>
  </tbody>
</table>

优化建议

如果觉得模板里直接写数组索引不够清晰，可以在控制器中提前把三个列表暴露为独立变量：

// 控制器代码
ctrl.wslist = ctrl.tableau[0].ws
ctrl.dayslist = ctrl.tableau[1].days
ctrl.tnqlist = ctrl.tableau[2].tnq

修改后模板代码更易维护：

<!-- 表头部分 -->
<th ng-repeat="day in ctrl.dayslist track by $index" class="xl154" style="width: 100px">{{day}}</th>
<!-- 行遍历 -->
<tr ng-repeat="item in ctrl.wslist track by $index">
  <td class="xl153">{{ctrl.wslist[$index]}}</td>
  <td class="xl153">{{ctrl.tnqlist[$index]}}</td>
</tr>