javascript - 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]

如您所见，结构类似于目录 - 我有代表单元的对象，每个单元都有自己的部分编号、标题和带有子部分的数组。

数据的特点是我永远不知道我有多少个节和多少个嵌套的子节。我需要假设我可以获得大约 2000 个具有不同配置的对象(也许更多)。另外，我无法预测最大嵌套级别，并且特定部分的最大嵌套级别可能有所不同。

我正在尝试找到最优化的方法来将此结构表示为 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