无限嵌套的NG-重复在角度指令 [英] 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).

现在，我知道该怎么做一个 NG-重复，但有一个 NG-重复，我会得到只从第一级的元素。如果我做了第二个 NG-重复第一个里面，我会得到只能从第二级的物品，等...

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. If I did a second ng-repeat inside the first one, I'd get only the items from the second level, etc...

由于我不知道有多少水平会有，我不能只窝几个 NG-重复对方内线。这就是为什么我在寻找一种方式来递归遍历整个数据阵列，并重新present我的HTML $ C $里面所有的都在里面的物品，一个角指令内（即，采用了棱角分明的指示/属性C）。那是可能的角度（1.3.x的）？

As I don't know how many levels there would be, I can't just nest a few ng-repeat inside each other. 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). Is that possible with Angular (1.3.x) ?

推荐答案

是的，这可以通过使用联模板

Yes, it is possible by using inline template

例如：

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

在HTML

<ul>
   <li ng-repeat="item in items" ng-include="'namVal'"></li>
</ul>  

利用@alexandernst Plunkr例如已更新
http://plnkr.co/edit/dKlrvtYH1IbQXFUEk2Wx?p=$p$pview

这篇关于无限嵌套的NG-重复在角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！