本文详解 angularjs 中嵌套 `ng-repeat` 的常见语法错误及修复方法，重点解决因 html 标签未闭合导致的多表格渲染失败问题，并提供可运行的结构化示例与最佳实践。
在 AngularJS 中，通过 ng-repeat 动态渲染多个表格是常见需求——例如为每组数据（如 moreStuff）生成一张独立表格，并在表内遍历其关联子项（如 cars）。但实践中，若 HTML 结构不规范，极易出现“只渲染出 1 张表”等异常现象，根本原因往往不是逻辑错误，而是标签未正确闭合引发的 DOM 解析失败。
以下是最典型的错误写法（源自提问）：
<div ng-repeat="stuff in moreStuff">
<table>
<h1>{{stuff.name}}</h1> <!-- 注意：此处应使用 {{ }} 插值 -->
<tr ng-repeat="car in cars">
<td>
<div>{{car.name}} <!-- ❌ 缺少 </div> 和 </td>、</tr> -->
</td>
stuff <!-- ❌ 非法文本节点，破坏表格结构 -->
</table>
</div>该代码存在三处关键问题：
- <div>、<td>、<tr> 标签全部未闭合，浏览器会尝试自动修复，但结果不可控，常导致外层 ng-repeat 提前终止；
- <h1>stuff.name</h1> 未使用 {{stuff.name}}，纯文本无法绑定；
- 表格内部混入非法文本 stuff，破坏 HTML 语义与 AngularJS 编译流程。
✅ 正确写法需严格遵循 HTML 规范，并确保嵌套层级清晰：
<div ng-repeat="stuff in moreStuff">
<table border="1" style="margin: 16px 0;">
<caption><h2>{{stuff.name}}</h2></caption>
<thead>
<tr>
<th>Car Name</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="car in cars">
<td>{{car.name}}</td>
<td>{{car.model || 'N/A'}}</td>
</tr>
<tr ng-if="cars.length === 0">
<td colspan="2">No cars available</td>
</tr>
</tbody>
</table>
</div>? 关键注意事项：
- ✅ 所有标签必须显式闭合（<div>...</div>，<tr>...</tr>，<td>...</td>）；
- ✅ 表格内容应置于 <tbody> 内，避免将 ng-repeat 直接放在 <table> 下非标准位置；
- ✅ 使用 <caption> 或 <h2> 替代 <h1> 放在表格内，更符合语义化规范；
- ✅ 添加 ng-if 处理空数组场景，提升健壮性；
- ✅ 确保控制器中 moreStuff 和 cars 数据已正确定义并注入 $scope：
$scope.moreStuff = [
{ name: 'Fleet A' },
{ name: 'Fleet B' },
{ name: 'Fleet C' }
];
$scope.cars = [
{ name: 'Tesla Model S', model: '2023' },
{ name: 'Toyota Camry', model: '2022' }
];? 进阶提示： 若需为每个 stuff 关联不同的 cars 子集（而非全局共享），建议将 cars 作为 stuff 的属性（如 stuff.cars），并改用 ng-repeat="car in stuff.cars"，实现真正独立的数据绑定。
遵循以上规范后，AngularJS 将准确为 moreStuff 中的每一项渲染一张完整表格，彻底解决“仅显示 1 张表”的问题。
