如何使用 ng-repeat 显示所有嵌套的 json 数据?
How to display all the nested json data using ng-repeat?
这是我的 JSON 数据:
"multipleLayerDropdown" : [
{"title":"Google","url":"#"},
{"title":"Another action","url":"#"},
{"title":"Something else here","url":"#"},
{"title":"More options", "submenu":[
{"title":"Second Level 1","url":"#"},
{"title":"Second Level 2","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]},
{"title":"Second Level 3","url":"#"},
{"title":"Second Level 4","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]}
]}
]
我期望如下所示:
- Google
- 另一个动作
- 这里还有其他东西
- 更多选项
- 二级1
- 二级2
- 第三级 1
- 第三级 2
- 二级3
- 二级4
- 第三级 1
- 第三级 2
以上示例仅显示了第 3 层嵌套。如果嵌套数据超过3个,也会显示。例如,如果 nested JSON 数据为 5,则将显示其中的 5 个。任何人都知道如何显示所有嵌套的 JSON 数据(使用 ng-repeat/any 其他 angularjs 方法)?
在 ng-repeat 指令中尝试 ng-template。所以我们可以创建树结构视图。
笨蛋 link : http://plnkr.co/edit/UIGyPsbavIC7OpF6DFEQ?p=preview
<script type="text/ng-template" id="tree-structure">
<ul class="childElement">
<li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
</ul>
</script>
<ul class="parentList">
<li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
</ul>
这是我的 JSON 数据:
"multipleLayerDropdown" : [
{"title":"Google","url":"#"},
{"title":"Another action","url":"#"},
{"title":"Something else here","url":"#"},
{"title":"More options", "submenu":[
{"title":"Second Level 1","url":"#"},
{"title":"Second Level 2","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]},
{"title":"Second Level 3","url":"#"},
{"title":"Second Level 4","submenu":[
{"title":"Third Level 1","url":"#"},
{"title":"Third Level 2","url":"#"}
]}
]}
]
我期望如下所示:
- 另一个动作
- 这里还有其他东西
- 更多选项
- 二级1
- 二级2
- 第三级 1
- 第三级 2
- 二级3
- 二级4
- 第三级 1
- 第三级 2
以上示例仅显示了第 3 层嵌套。如果嵌套数据超过3个,也会显示。例如,如果 nested JSON 数据为 5,则将显示其中的 5 个。任何人都知道如何显示所有嵌套的 JSON 数据(使用 ng-repeat/any 其他 angularjs 方法)?
在 ng-repeat 指令中尝试 ng-template。所以我们可以创建树结构视图。
笨蛋 link : http://plnkr.co/edit/UIGyPsbavIC7OpF6DFEQ?p=preview
<script type="text/ng-template" id="tree-structure">
<ul class="childElement">
<li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
</ul>
</script>
<ul class="parentList">
<li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li>
</ul>