Question

我想重复一个json来生成如下所示的菜单：

{
    "menu":[
        {"title":"Menu 1",
         "link":"http://google.com",
         "submenu": []
        },
        {"title":"Menu 2",
         "submenu": [{"title":"submenu 1", "link":"http://bing.com"}]
        }
    ]
}

输出应该是这样的：

<a href="http://google.com">Menu 1</a>
<a href="javascript:;" submenu submenu-width="400">Menu 2</a>

我正试着这样做：

<a ng-repeat="data in data.menu">{{data.title}}</a>

但我被困在：

当submenu submenu-width="400"数组不为空时，如何添加submenu？
如果没有href或有子菜单时，如何将javascript:;的值设为link？

Answer 1

这不完全，但与你想要的相似

<div ng-repeat="data in data.menu">
    <a ng-if="data.submenu.length <= 0" ng-href="{{ data.link }}">
       {{data.title}}
    </a>
    <a ng-if="data.submenu.length > 0" href="javascript:;" 
            submenu submenu-width="400">
       {{data.title}}
    </a>
</div>

Answer 2

使用ng-show显示超链接尝试，

 <div ng-repeat="data in data.menu" >
    <a ng-show=data.link href='{{data.link}}'>{{data.title}}</a>
    <a ng-show=!data.link href='javascript:;' submenu submenu-width="400">{{data.title}}</a>
</div>

这是工作的plunker plkr

Angular ng-repeat生成菜单

2 个答案: