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