HTML表格rowspan在AngularJS ng-repeat中未按预期生效，该如何修改？

你出现key重复的核心原因是：带rowspan的key单元格被写在了ng-repeat="itr in value"的循环体内部，每遍历一条数据就会生成一个key单元格，自然会重复出现多次。同时rowspan取值value.length+1也不符合需求，表头行的第四列已经是独立的标题，不需要key单元格跨表头行。

修改后的代码如下：

<table>
  <tbody ng-repeat="(key,value) in values1">
    <tr>
      <th translate> Heading 1</th>
      <th translate> Heading 2 </th>
      <th translate> Heading 3 </th>
      <th translate> Heading 4 </th>
    </tr>
    <tr ng-repeat="itr in value">
      <td>
        {{itr.value1}}
      </td>
      <td>
        {{itr.value2}}
      </td>
      <td>
        {{itr.value3}}
      </td>
      <td ng-if="$first" rowspan="{{value.length}}" style="vertical-align: middle;">
        {{key}}
      </td>
    </tr>
  </tbody>
</table>

主要调整点：

• 给key对应的td添加ng-if="$first"判断，仅在遍历第一条数据时生成该单元格，避免重复生成
• 将rowspan值调整为{{value.length}}，刚好覆盖当前key对应的所有数据行
• 可选添加vertical-align: middle样式，确保key内容在合并单元格内垂直居中

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