嵌套表格，三個級別。 （上孫子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>