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>

因此，您将呈现“无限”级别的递归，而不仅仅是第一级。

如何使用AngularJS以递归方式将JSON树呈现为HTML？

1 个答案: