Angular 1.5和多重嵌套数据结构

Question

我有一个类似此示例的嵌套结构：

let structure = [{
  section: '1',
  title: 'First lvl title',
  children: [{
    section: '1.1',
    title: 'Second lvl title',
    children: []
  }, {
    section: '1.2',
    title: 'Second lvl title',
    children: [{
      section: '1.2.1',
      title: 'Third lvl title',
      children: []
    }, {
      section: '1.2.2',
      title: 'Third lvl title',
      children: []
    }]
  }, {
    section: '1.3',
    title: 'Second lvl title',
    children: []
  }]
}, {
  section: '2',
  title: 'First lvl title',
  children: [{
    section: '2.1',
    title: 'Second lvl title',
    children: []
  }, {
    section: '2.2',
    title: 'Second lvl title',
    children: []
  }]
}, ...other objects]

如您所见，结构类似于目录-我有代表单位的对象，每个单位都有自己的节号，标题和带有小节的数组。

数据特征是我永远不知道我有多少节和多少嵌套子节。 我需要假设我可以用不同的配置获得大约2 000个对象（可能更多）。 另外，我无法预测最大嵌套级别，并且对于特定部分，它可能有所不同。

我正在尝试找到最优化的方法来将该结构表示为HTML页面。 我正在考虑使用ng-repeat，但是我不知道这是一个好主意，因为我不知道我将拥有多少个深层次。 另外，在生成HTML页面之后，我可以删除一个部分（例如，第1部分），并且我需要重新计算每个其他部分和子部分的部分编号（第2部分现在是第1部分，第2.1小节现在是1.1小节，依此类推。 ）。 处理如此大量数据的最佳方法是什么？

Answer 1

您将需要一个递归模板，其中的结构和数据深度都无关紧要。 您可以使用递归自定义指令或递归ngInclude：

<script type="text/ng-template" id="categoryTree">
    {{ category.title }}
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>

http://benfoster.io/blog/angularjs-recursive-templates