如何在AngularJS的ng-repeat中实现多行表格布局？

首先修正你代码里的两处基础语法问题：

• 表头写法错误：多个表头应放在同一个<tr>下的<th>标签内，而非单独的<tr>标签
• 输入框标签缺失前缀：原代码里的<class="form-control...">应改为<input class="form-control...">

接下来实现将item.info10移到单独行并设置colspan=10的需求，具体修改后的代码如下：

<table class="table table-condensed table-striped">
   <tbody>
      <!-- 表头 -->
      <tr>
          <th>Header 01</th>
          <th>Header 02</th>
          <!-- ... 此处省略Header 03至Header 09的<th>标签 ... -->
          <th>Header 10</th>
      </tr>

      <!-- 数据行 -->
      <tr ng-repeat-start="item in vm.myList">
          <td><input class="form-control input-sm" type="text" ng-model="item.info01" /></td>
          <td><input class="form-control input-sm" type="text" ng-model="item.info02" /></td>
          <!-- ... 此处省略info03至info09的<td>标签 ... -->
          <!-- 移除原有的info10所在<td> -->
      </tr>
      <!-- 新增行放置info10，colspan=10占满整行 -->
      <tr ng-repeat-end>
          <td colspan="10">
              <input class="form-control input-sm" type="text" ng-model="item.info10" />
          </td>
      </tr>
   </tbody>
</table>

关键说明 #

• 使用AngularJS的ng-repeat-start和ng-repeat-end指令，确保每个item对应两行数据：第一行承载前9列内容，第二行单独放置第10列
• colspan="10"让该行单元格横跨全部10列，保证表格布局整齐，不会出现列错位问题
• 修正后的语法能确保页面正常渲染，避免出现DOM解析错误

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