嵌套表格，三个级别。 （上孙子NG-重复？）

Question

我有一个看起来像这样三个层次的数据结构（父母，子女，孙子女）：

$scope.data = [ 
    { ID: '1', Title: 'Parent Titile 1', children: [ 
    { ID: '1.1', Title: 'Child Title 1.1', children: [ 
     {ID: '1.1.1', Title: 'grandchild title 1.1.1'} 
     ] 
    }, 
    { ID: '1.2', Title: 'Child Title 1.2', children: [ 
     {ID: '1.2.1', Title: 'grandchild title 1.2.1'} 
     ] 
    }, 
    ] 
    }, 
    { ID: '2', Title: 'Parent Titile 2', children: [ 
    { ID: '2.1', Title: 'Child Title 2.1', children: [ 
     {ID: '2.1.1', Title: 'grandchild title 2.11'} 
     ] 
    } 
    ] 
    } 
]; 

使用smart-table我设法为两个层次显示这种结构，我想这是不使用智能表一样，但是这是我做的：

<table st-table="displayedCollection" st-safe-src="safeCollection" class="table table-bordered table-hover"> 
<thead> 
<tr> 
    <th></th> 
    <th>#ID</th> 
    <th>Title</th> 
</tr> 
</thead> 
<tbody ng-repeat="row in displayedCollection"> 
<tr> 
    <td> <span ng-class="{'fa fa-plus fa-fw': !row.isCollapsed, 'fa fa-minus fa-fw': row.isCollapsed}"></span> </td> 
    <td ng-click="row.isCollapsed = !row.isCollapsed"> {{row.ID}}</td> 
    <td> {{row.Title}} </td> 
</tr> 
<tr uib-collapse="!row.isCollapsed" ng-repeat="child in row.children"> 
    <td></td> 
    <td> {{child.ID}} </td> 
    <td> {{child.Title}} </td> 
</tr> 
</tbody> 

正如你所看到的，我用两个<tr>，其中一人迭代在EA的孩子排。

因此，这将显示一个表，其中父母的ng-repeat和其子女的另一个ng-repeat使用ui-bootstrap我可以用collapse指令隐藏孩子，并在父母被点击时显示他们，有点像树视图。

我无法做的是显示第三级（孙子）。我不能简单地创建另一个<tr>并去ng-repeat="grandchild in row.children.children"。

我怎样才能以类似的方式显示孙子，我展示孩子？

编辑：Plunker与合作两级例如

OBS！如果你能想到一个更合适的标题，我对标题不好，请让我现在，让人们理解。

EDIT2：由于vanderwijks解释ng-repeat-start和ng-repeat-stop我能够做到我想要的东西，从某种意义上说..我觉得这变得非常复杂，它给了我一个额外的<tr>刚刚结束再说。

Updated plunker与工作的孙子女。

在这个版本中，当他们的父母是他们应该的时候，孙子们并没有崩溃，但那是另一个问题。

不过，我觉得这不是最佳的解决方案，所以我仍然在寻找更好的方法来做到这一点

Answer 1

这是一个简单的方法来显示三个层次：

<div ng-repeat="row in displayedCollection"> 
    <span>{{row.ID}}</span> 

    <div ng-repeat="child in row.children"> 
     <span>{{child.ID}}</span> 

     <div ng-repeat="grandchild in child.children"> 
      <span>{{grandchild.ID}}</span> 
     </div> 
    </div> 
</div>