AngularJS ng-repeat 嵌套循环但未嵌套元素答案

【问题标题】：AngularJS ng-repeat nested loop but unnested elementAngularJS ng-repeat 嵌套循环但未嵌套元素
【发布时间】：2015-07-05 11:57:46
【问题描述】：

编辑：对不起，这已经被问到了 - Adding rows with ng-repeat and nested loop

你如何在 AngularJS 中做到这一点？

foreach(var item in items) {                 <-- How to do this loop

  <tr><td>{{item.Name}}</td></tr>

  foreach(var subitem in item.subitems) {    <-- AND this loop?

    <tr class='sub'><td>{{subitem.Name}}</td></tr>

  }
}

请注意，<tr> 元素不是嵌套的。

一个可能的预期结果：

<tr><td>Item 1</td></tr>
<tr class='sub'><td>Item 1.1</td></tr>
<tr class='sub'><td>Item 1.2</td></tr>
<tr><td>Item 2</td></tr>

【问题讨论】：

我会在控制器中使用 JavaScript 代码创建一个包含所有行的数组，并在视图中使用单个 ng-repeat。
Adding rows with ng-repeat and nested loop的可能重复
为什么你不想在这里使用ng-repeat
我会按照这个 stackoverflow 回答：stackoverflow.com/questions/15362868/…

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您可以使用tbody 元素作为第一个ng-repeat 容器来实现此目的，如下所示：

<table>
  <tbody ng-repeat="item in items">
    <tr><td>{{item.Name}}</td></tr>
    <tr class="sub" ng-repeat="subitem in item.subitems">
      <td>{{subitem.Name}}</td>
    </tr>
  </tbody>
</table>

【讨论】：