如何使用 AngularJS 将 JSON 树递归渲染为 HTML？

Question

假设我的 javascript 中有以下 JSON 结构作为名为 myTree 的变量：

[
    {"name": "A", "children": [
            {"name": "C", "children": []},
            {"name": "D", "children": []},
        ]
    },
    {"name": "B", "children": []}
]

我想用AngularJS渲染成下面的样子HTML。我该怎么做？仅供参考，树可以有任意深度。我在这里只展示了一个非常简单的例子。

<ul>
    <li>
        A
        <ul>
            <li>C</li>
            <li>D</li>
        </ul>
    </li>
    <li>B</li>
</ul>

Answer 1

你应该制作递归模板：

<script type="text/ng-template" id="item_template">
 {{child.name}}
 <ul>
    <li ng-repeat="child in child.children" ng-include="'item_template'">
    </li>
  </ul>
</script>

<ul>
  <li ng-repeat="child in myTree" ng-include="'item_template'">
  </li>
</ul>

因此，您将渲染 'infinite' 级递归，而不仅仅是第一级。

如何使用 AngularJS 将 JSON 树递归渲染为 HTML？

How to recursively render JSON tree as HTML using AngularJS?

html

javascript

json

angularjs