举个例子:
http://jsfiddle.net/7U5Pt/
在这里,我有一个描述(非常基本的)菜单的对象。每个项目可以有多个子级,这些子级可能具有无限级别的层次结构。
我用来将其转换为ng-repeat
元素的<ul><li>
指令在层次结构的前两个级别上工作正常,但在层次结构的第三个级别或任何后续级别上则不能正常工作。
递归地迭代此对象并处理无限级别的子级的最佳方法是什么?
任何帮助,不胜感激!
如果小提琴消失了,下面是代码:
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<nav class="nav-left">
<ul ng-repeat="item in mytree.items">
<li>NAME: {{ item.name }}
<ul ng-repeat="item in item.children.items">
<li>SUB NAME: {{ item.name }}</li>
</ul>
</li>
</ul>
</nav>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
$scope.mytree = {
"items": [{
"name": "one",
"children": {
"items": [
{
"name": "one sub a",
"children": {
"items": [{
"name": "one sub level two a"
},
{
"name": "one sub level two b"
}]
}
},
{
"name": "one sub b"
}
]
}
},
{
"name": "two"
},
{
"name": "three"
},
{
"name": "four",
"children": {
"items": [{
"name": "four sub a"
},
{
"name": "four sub b"
}]
}
},
{
"name": "five"
}]
};
});
最佳答案
因此,对于感兴趣的人来说,最好的方法是使用angular-recursion
帮助器:
https://github.com/marklagendijk/angular-recursion
这使您可以递归调用ng-repeat函数。因此,您认为类似:
<tree family="mytree"></tree>
然后为该调用定义一个指令,如下所示:
.directive('tree', function(RecursionHelper) {
return {
restrict: "E",
scope: {family: '='},
template:
'{{ family.name }}'+
'<ul ng-if="family.children">' +
'<li ng-repeat="child in family.children">' +
'<tree family="child"></tree>' +
'</li>' +
'</ul>',
compile: function(element) {
return RecursionHelper.compile(element);
}
};
});
显然,递归助手对于停止某种无限循环是必不可少的,如here所述。感谢@arturgrzesiak提供的链接!
关于javascript - 如何使用Angular JS递归遍历具有未知层次结构的对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23371038/