Question

我正在尝试从JSON循环一个数组，并且更像侧边菜单显示内容。我写了像

这样的东西

＆＃13;

<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>

＆＃13;

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

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

我的JSON的一部分是为了更好地理解，如下所示：

＆＃13;

{
  "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"
      }]
  }]
}

＆＃13;

我希望侧边栏更像

THIS

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>

如果您想要一个相对简单的方法来打开/关闭菜单，您可能希望将所有这些放入Angular手风琴中。如果你愿意，我可以帮你解决这个问题。

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

2 个答案: