[英]Infinitely nested ng-repeat in an Angular directive
I have an object containing infinitely nested data, like the following example: 我有一个包含无限嵌套数据的对象,如下例所示:
[
{
name: "Foo",
value: "Bar",
sub: [
{
name: "ABC",
value: "LLL",
sub: [
...
]
},
{
...
}
]
},
{
name: "Oof",
value: "Rab"
sub: [
...
]
}
]
Every element can contain a sub
value, which would contain one or multiple elements with the same structure ( name
, value
, sub
if there are more sub-elements). 每个元素都可以包含一个sub
值,该sub
值包含一个或多个具有相同结构的元素(如果有更多子元素,则为name
, value
, sub
)。
Now, I know how to do a ng-repeat
, but with a single ng-repeat
, I'll get only the elements from the first level. 现在,我知道如何进行ng-repeat
,但是使用单个ng-repeat
,我将只获得第一级的元素。 If I did a second ng-repeat
inside the first one, I'd get only the items from the second level, etc... 如果我在第一个内部进行了第二次ng-repeat
,我只会从第二级获得项目,等等......
As I don't know how many levels there would be, I can't just nest a few ng-repeat
inside each other. 因为我不知道会有多少级别,所以我不能在彼此内部嵌入几个ng-repeat
。 That is why I'm looking for a way to recursively loop over the entire data array and represent all the items that are inside, inside an Angular directive (that is, using Angular's directives/attributes inside my HTML code). 这就是为什么我正在寻找一种方法来递归遍历整个数据数组并表示Angular指令内部的所有项目(即在我的HTML代码中使用Angular的指令/属性)。 Is that possible with Angular (1.3.x) ? Angular(1.3.x)可以实现吗?
Yes, it is possible by using inline template 是的,可以使用内联模板
Example : 示例:
<script type="text/ng-template" id="namVal">
{{ item.name}}
<ul ng-if="item.sub">
<li ng-repeat="item in item.sub" ng-include="'namVal'"></li>
</ul>
</script>
in html 在HTML中
<ul>
<li ng-repeat="item in items" ng-include="'namVal'"></li>
</ul>
UPDATED using Plunkr example by @alexandernst http://plnkr.co/edit/dKlrvtYH1IbQXFUEk2Wx?p=preview 使用Plunkr示例更新@alexandernst http://plnkr.co/edit/dKlrvtYH1IbQXFUEk2Wx?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.