【问题标题】:How to display all the nested json data using ng-repeat?如何使用 ng-repeat 显示所有嵌套的 json 数据?
【发布时间】:2015-06-18 08:58:30
【问题描述】:

这是我的 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个,也会显示出来。例如,如果嵌套的 JSON 数据为 5,则显示其中的 5 个。任何人都知道如何显示所有嵌套的 JSON 数据(使用 ng-repeat/任何其他 angularjs 方法)?

【问题讨论】:

标签: json angularjs angularjs-ng-repeat ng-repeat


【解决方案1】:

尝试使用 ng-repeat 指令的 ng-template。所以我们可以创建树结构视图。

Plunkr 链接: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-22
    • 2018-01-14
    • 1970-01-01
    • 2013-03-04
    相关资源
    最近更新 更多