嵌套表，三个级别。 （对孙子们重复一次？）

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>，其中一个迭代每行中的子项。

因此，这将显示一个表格，其中包含父项的ng-repeat，以及其子项的另一个ng-repeat，使用ui-bootstrap我能够使用collapse指令隐藏这些子项，并在显示时显示它们单击父级，有点像树视图。

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

如何以与展示孩子相似的方式展示孙子孙女？

使用有效的两级示例编辑：Plunker

OBS！我很擅长头衔，如果你能想到一个更合适的头衔，请现在就让我，让人们明白。

Edit2：感谢ng-repeat-start对ng-repeat-stop和<tr>的解释，我设法以某种方式做了我想做的事情......我觉得这很复杂，它给了我一个额外application.conf只是为了结束重复。

vanderwijks与工作的孙子孙女。

在这个版本中，孙子们在他们的父母是他们应该的时候不会崩溃，但这是另一个问题。

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

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>