javascript - 使用 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>

问题是我的第二个键既有对象又有数组。如何仅通过数组显示对象和循环/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-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>

如果您想要一种相对简单的方法来打开/关闭菜单，您可能希望将所有这些放入 Angular Accordion 中。如果您愿意，我也许可以帮助您。