admin管理员组文章数量:1323380
I am looking for a way to generate a nested menu based off some data, the problem I would like to work around is this:
I don't know how many sub levels of data I will have each time (it's dynamic) and I would like to generate the menu based on the data with ng-repeats. I would like a way to generate the menu without hard coding the repeat levels. So if there's 2 or 10 it would fill itself in.
So right now I'm hard coding the repeat levels like so :
<ul class="outerMenu" >
<li ng-repeat="level in globalMenu" ng-click="showSubs =! showSubs" >{{level.name}} {{level.subs.length}}
<ul ng-if="level.subs.length > 0" ng-show="showSubs">
<li ng-repeat="sub in level.subs" ng-click="$event.stopPropagation()">{{sub.name}}
</li>
</ul>
</li>
</ul>
So I'm wondering if there is a way to generate the nested repeats (that would continue to go withinside of itself) based on the data. So 1 level down of the JSON looks like this.
$scope.globalMenu = [
{
'name' : 'level 1',
'subs' : [
{
'name' : 'level 1-1'
},
{
'name' : 'level 1-2'
},
{
'name' : 'level 1-3'
},
{
'name' : 'level 1-4'
}
]
},
{
'name' : 'level 2'
},
{
'name' : 'level 3'
},
{
'name' : 'level 4'
},
{
'name' : 'level 5'
}
];
So I'm wondering if those subs had another sub level inside of them (presumably called subs again, if I could have angular generate a new nested repeat, instead of having hard coded levels that ng-show based on if the current item has any subs - as I would have to assume the max number of possible levels and build for that and I do not 100% know what that will be.
Thanks for reading!
I am looking for a way to generate a nested menu based off some data, the problem I would like to work around is this:
I don't know how many sub levels of data I will have each time (it's dynamic) and I would like to generate the menu based on the data with ng-repeats. I would like a way to generate the menu without hard coding the repeat levels. So if there's 2 or 10 it would fill itself in.
So right now I'm hard coding the repeat levels like so :
<ul class="outerMenu" >
<li ng-repeat="level in globalMenu" ng-click="showSubs =! showSubs" >{{level.name}} {{level.subs.length}}
<ul ng-if="level.subs.length > 0" ng-show="showSubs">
<li ng-repeat="sub in level.subs" ng-click="$event.stopPropagation()">{{sub.name}}
</li>
</ul>
</li>
</ul>
So I'm wondering if there is a way to generate the nested repeats (that would continue to go withinside of itself) based on the data. So 1 level down of the JSON looks like this.
$scope.globalMenu = [
{
'name' : 'level 1',
'subs' : [
{
'name' : 'level 1-1'
},
{
'name' : 'level 1-2'
},
{
'name' : 'level 1-3'
},
{
'name' : 'level 1-4'
}
]
},
{
'name' : 'level 2'
},
{
'name' : 'level 3'
},
{
'name' : 'level 4'
},
{
'name' : 'level 5'
}
];
So I'm wondering if those subs had another sub level inside of them (presumably called subs again, if I could have angular generate a new nested repeat, instead of having hard coded levels that ng-show based on if the current item has any subs - as I would have to assume the max number of possible levels and build for that and I do not 100% know what that will be.
Thanks for reading!
Share Improve this question asked Dec 16, 2014 at 18:24 ajmajmajmaajmajmajma 14.2k25 gold badges83 silver badges138 bronze badges 1- what u have done seems right to me... – micronyks Commented Dec 16, 2014 at 18:30
3 Answers
Reset to default 5You can create a template and ng-include it for every new sub-level.
<script type="text/ng-template" id="menu_sublevel.html">
{{ sub.name }}
<ul ng-if="item.subs">
<li ng-repeat="item in item.subs" ng-click="$event.stopPropagation()">
{{sub.name}}
</li>
</ul>
</script>
Then in your view just define the top level:
<ul class="outerMenu">
<li ng-repeat="item in globalMenu" ng-click="$event.stopPropagation()"
ng-include="'menu_sublevel.html'"></li>
</ul>
You can use recursion.
You can find examples here and there.
Create a template and ng-repeat this template (with include or directive). And in the template, put a ng-repeat again, on the same template.
Hope it can help.
You can use angular-ui-tree for that
本文标签: javascriptAngular dynamic nested ngrepeat generationStack Overflow
版权声明:本文标题:javascript - Angular dynamic nested ng-repeat generation - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742116683a2421499.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论