使用 Angular JS 从 JSON 循环遍历数组

Question

我正在尝试循环遍历 JSON 中的一个数组，并将内容显示得更像侧边菜单。我写了类似

的东西

<ul ng-repeat="(key, value) in menuList.Menu">
  <li>{{key}}</li>
  <ul ng-repeat="(key, value) in value">
    <li> {{key}}</li>  //second key
    <ul ng-repeat="(key, value) in value">
      <li> {{key}}</li> 
      <ul ng-repeat="(key, value) in value">
        <li> {{key}} : {{value}}</li>  
      </ul>
    </ul>
  </ul>
</ul>

问题是我的第二个键既有对象又有数组。如何仅通过数组显示 Object 和 loop/ng-repeat 的值。我不能用这个修改它，因为它会显示数组的全部内容。

 <li> {{key}} : {{value}}</li>

我的JSON的一部分为了更好的理解如下：

{
  "class": 99,
  "mode" : 0,
  "Menu": [{
      "MenuNum":  1,
      "MenuItems":  [{
          "ItemNum":  0,
          "ItemDesc": "Main Menu",
          "ActionCode": "-",
          "ActionInst": ""
        } , {
          "ItemNum":  1,
          "ItemDesc": "BBQ",
          "ActionCode": "M",
          "ActionInst": "0992"
        }, {
          "ItemNum":  2,
          "ItemDesc": "Beverages",
          "ActionCode": "M",
          "ActionInst": "0992"
        }]
        },{
      "MenuNum":  2,
      "MenuItems":  [{
          "ItemNum":  0,
          "ItemDesc": "Sub Menu",
          "ActionCode": "-",
          "ActionInst": ""
        }, {
          "ItemNum":  1,
          "ItemDesc": "BBQTYPE1",
          "ActionCode": "P",
          "ActionInst": "0996"
        }, {
          "ItemNum":  2,
          "ItemDesc": "BeveragesTYPE1",
          "ActionCode": "P",
          "ActionInst": "0998"
      }]
  }]
}

我想要侧边栏更像

Answer 1

您似乎正在尝试创建一个包含嵌套子项的列表。使用 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>

我使用的数据结构与您的代码略有不同，但您应该明白了。这是一个演示：http://jsfiddle.net/mmmxh8kq/

编辑：

如果数据像您发布的 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>

演示：http://jsfiddle.net/n4mo80od/

Answer 2

假设您目前只需要 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>

如果您随后想要一种相对简单的方法来执行菜单 opening/closing，您可能希望将所有这些都放入 Angular 手风琴中。如果你愿意，我或许可以帮你。

使用 Angular JS 从 JSON 循环遍历数组

Loop through an array from JSON using Angular JS

javascript

arrays

user-interface

json

angularjs