Javascript 使用Angular JS从JSON循环一个数组

我试图循环使用JSON中的数组，并将内容显示得更像一个侧菜单。我写了这样的东西

{{key}}

{{key}}
//第二个键

{{key}}

{{key}}:{{value}}

看起来您正试图创建一个包含嵌套子项的列表。使用

ng include

递归显示所有嵌套子级的递归模式如何？大概是这样的：

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

<ul>
  <li ng-repeat="menuItem in menuItems" ng-include="'menuTree'"></li>
</ul> 

{{menuItem.name}

我对您的代码使用了稍微不同的数据结构，但您应该明白这一点。下面是一个演示：

编辑：

如果数据与您发布的JSON一样简单，并且不需要递归菜单，您可以尝试以下方法：

<ul>
  <li ng-repeat="menus in menuList.Menu">
    {{ menus.MenuNum }}
    <ul>
      <li ng-repeat="menuItems in menus.MenuItems">
        {{ menuItems.ItemDesc }}
      </li>
    </ul>
  </li>
</ul>  

{{menus.MenuNum}


{{menuItems.ItemDesc}

---

演示：

假设此时您只需要ng repeat逻辑，这可能就是您想要的：

  <ul ng-repeat="topMenu in menuList.Menu">
        <li>
            {{$index}}
        <ul>
            <li>
                MenuNum: {{topMenu.MenuNum}}
            </li>
            <li> MenuItems
                <ul ng-repeat="submenu1 in topMenu.MenuItems">
                    <li>
                        {{$index}}
                        <ul>
                            <li>ItemNum: {{submenu1.ItemNum}}</li>
                            <li>ItemDesc: {{submenu1.ItemDesc}}</li>
                            <li>ActionCode: {{submenu1.ActionCode}}</li>
                            <li>ActionInst: {{submenu1.ActionInst}}</li>
                          </ul>
                      </li>
                </ul>
            </li>
            </ul>
        </li>
    </ul>

{{$index}}


MenuNum:{{topMenu.MenuNum}}

菜单项


{{$index}}

ItemNum:{{subnum1.ItemNum}}
ItemDesc:{{subnum1.ItemDesc}}
动作码：{{subnum1.ActionCode}}
ActionInst:{{子菜单1.ActionInst}}

---

如果你想用一种相对简单的方式打开/关闭菜单，你可能会想把所有这些都放到一个有角度的手风琴上。如果您愿意，我可能可以帮助您。

您能提供一些示例数据吗？以及您希望从示例数据中获得的DOM结构。我不确定我是否理解您的问题。这似乎是你需要的。设置

ngSwitch

以检查最后一秒键是否为对象类型。如果为true，则插入为对象设计的DOM。否则，插入为数组设计的DOM。您能给出所需的HTML输出吗？从图片上看不清楚您想要生成什么。单击后菜单应该展开和折叠。这里我已经扩展了菜单。然后是其中的第二个对象，然后是其中的第一个数组。我认为没有更好的说法了。我无法理解下面的大多数答案，因为我的JSON没有这个示例JSON那么小。它有大约200个菜单，每个菜单有大约10到40个菜单项。我相信这个解决方案不适合我的JSON数据结构。我的JSON没有这个示例JSON那么小。它有大约200个菜单，每个菜单有大约10到40个菜单。我看到下面的答案是解决这个问题的一种方法。但是代码可能会有点长。但我真的不明白为什么ng include会更好。我理解，在多个视图需要包含相同代码的情况下，我们在视图中使用它是为了避免重复自己。但是它如何比下面提到的答案更好呢？

ng include

方法用于递归菜单。假设你有一个菜单，它有子菜单，子菜单有自己的子菜单-你会想要一种不重复太多的方式来处理这个问题。如果您知道情况并非如此，那么简单的

ng repeat

就可以了。这很有效。如果我的JSON有100个菜单和10到50个菜单项，这是最好的方法吗？我还想打开和关闭菜单。如果你能帮我学有角度的手风琴就太好了。100种菜单听起来太复杂了。这将是不可能维护的，并且可能会使DOM过载到崩溃点。当然，你可以将你的材料分成不同的页面/模块，处理不同的主题。或者，为了使其可维护并保持理智，您必须将结构简化为便于自动化/解析树的形式。我不会用这么复杂的东西来重新发明轮子。最后一件事。假设我只有一两个菜单。在我得到{{subnum1.ActionInst}的代码中，我需要实现一个逻辑，它需要我执行另一个

但我只需要得到MenuItems的子菜单，它等于subnum1.ActionInst.substring（3）。然后我希望正常的循环继续。有可能实现吗？我肯定有可能，但我不太明白你在问什么。你是说结构保持不变，但在某些情况下，你不想看到子菜单1的内容，除非它等于subnum1.ActionInst.substring（3）？或者您是说，如果subnum1.ActionInst.substring（3）等于某个值，则需要在subnum1下再添加一个子菜单？