如何在 AngularJS 中正确使用嵌套 ng-repeat 渲染多个表格

花韻仙語 2026-01-09 00:00:00 次阅读

本文详解 angularjs 中嵌套 `ng-repeat` 的常见语法错误及修复方法，重点解决因 html 标签未闭合导致的多表格渲染失败问题，并提供可运行的结构化示例与最佳实践。

在 AngularJS 中，通过 ng-repeat 动态渲染多个表格是常见需求——例如为每组数据（如 moreStuff）生成一张独立表格，并在表内遍历其关联子项（如 cars）。但实践中，若 HTML 结构不规范，极易出现“只渲染出 1 张表”等异常现象，根本原因往往不是逻辑错误，而是标签未正确闭合引发的 DOM 解析失败。

以下是最典型的错误写法（源自提问）：

  {{stuff.name}}
    stuff 
     
    
      
        {{car.name}}

该代码存在三处关键问题：

、、标签全部未闭合，浏览器会尝试自动修复，但结果不可控，常导致外层 ng-repeat 提前终止；
stuff.name
未使用 {{stuff.name}}，纯文本无法绑定；
表格内部混入非法文本 stuff，破坏 HTML 语义与 AngularJS 编译流程。

✅ 正确写法需严格遵循 HTML 规范，并确保嵌套层级清晰：

  
    {{stuff.name}}
    
      
        Car Name
        Model
      
    
    
      
        {{car.name}}
        {{car.model || 'N/A'}}
      
      
        No cars available

{{stuff.name}}
Car Name	Model
{{car.name}}	{{car.model \|\| 'N/A'}}
No cars available

? 关键注意事项：

✅ 所有标签必须显式闭合（...，...，...）；
✅ 表格内容应置于内，避免将 ng-repeat 直接放在下非标准位置；
✅ 使用
✅ 添加 ng-if 处理空数组场景，提升健壮性；
✅ 确保控制器中 moreStuff 和 cars 数据已正确定义并注入 $scope：
```
$scope.moreStuff = [
  { name: 'Fleet A' },
  { name: 'Fleet B' },
  { name: 'Fleet C' }
];
$scope.cars = [
  { name: 'Tesla Model S', model: '2025' },
  { name: 'Toyota Camry', model: '2025' }
];
```
? 进阶提示： 若需为每个 stuff 关联不同的 cars 子集（而非全局共享），建议将 cars 作为 stuff 的属性（如 stuff.cars），并改用 ng-repeat="car in stuff.cars"，实现真正独立的数据绑定。
遵循以上规范后，AngularJS 将准确为 moreStuff 中的每一项渲染一张完整表格，彻底解决“仅显示 1 张表”的问题。
或
替代
放在表格内，更符合语义化规范；