AngularJS中循环多张表格仅渲染一张的问题求助

你的代码存在几个关键问题，导致仅渲染出一张表格，修正方案如下：

问题分析 #

• HTML结构非法：<h1>直接嵌套在<table>内是无效的，浏览器会自动重构DOM结构，破坏ng-repeat的作用域逻辑
• 数据绑定错误：<h1>stuff.name</h1>未使用AngularJS的插值语法，无法渲染动态数据
• 标签未闭合：<div>{{car.name}}缺少闭合标签，<tr>、<td>也存在结构不完整问题
• 数据源错误：如果cars是每个stuff对象的属性，当前使用全局的cars会导致所有表格渲染相同内容，看起来像只有一张表格

修正后的代码 #

<div ng-repeat="stuff in moreStuff">
  <!-- 将标题放在表格外，或用表格表头替代 -->
  <h1>{{stuff.name}}</h1>
  <table>
    <tbody>
      <!-- 如果cars是stuff的属性，使用stuff.cars循环 -->
      <tr ng-repeat="car in stuff.cars">
        <td>
          <div>{{car.name}}</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

额外说明 #

• 如果cars确实是全局数组，只需保留ng-repeat="car in cars"，但要确保moreStuff数组的每个元素都能触发ng-repeat生成独立的<div>和表格
• 始终保证HTML标签闭合且结构合法，避免浏览器自动修正DOM导致AngularJS指令失效

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