在NG重复的内部运行几个未知的NG重复

Question

假设我们有这样的数组。在此示例上，为了简化，我只是在数组中添加了一个对象，但假设它有很多。

$scope.var = [
    {name: "John",
     surname: "Smith",
     children: [
         {name: "Phil",
          surname: "Smith",
          children: [
              {name: "Peter",
               surname: "Smith",
               children: []},
              {name: "Joe",
              surname: "Smith",
              children: [
                  {name: "Dirk",
                   surname: "Smith",
                   children: [
                       {name: "Carl",
                        surname: "Smith",
                        children: []}
                   ]
                  }
              ]
              }
          ]
         }
     ]
    }
];

因此，您是否可以看到，每个对象都有一个专门针对的孩子，该孩子由更多的物体制成。以一种不太概念的方式，假设我正在做一棵家谱，并决定从我的大祖父爸爸开始。现在，我想显示使用NG-Repeat的每个人的名称。

如何在不知道n的数量的情况下使用ng重复n次。我将如何迭代ng重复？

希望我对此很清楚。

谢谢您的时间：）

Answer 1

您需要使用recursive ng-repeat。

JSFiddle DEMO

说明：

在第一个ng-repeat期间，第一个级别是在对象var中进行的，在同一标签中，我们拥有一个ng-include，其中包括我们提供的模板（categoryTree），然后，第一个级别的名称将在 {{ person.name }}然后使用NG-IF，基本上检查该级别是否包含儿童属性。有关ng-if。

的重要信息

请注意，当使用NGIF删除元素时，其范围将被破坏，并在恢复元素时创建新的范围。NGIF内部创建的范围使用原型继承从其父范围继承。这一点的重要含义是，如果在NGIF中使用NGMODEL与在父范围内定义的JavaScript原始性结合。在这种情况下

上面的线从Angular NG-IF文档

取。

因此，我想说的要点是，在ng-if标签内部有另一个具有相同变量名称（person）的ng-repeat，因此，由于ng-if创建了一个新的范围，因此这里不存在先前的变量person，因此因此它被视为新变量。因此，我们得到了重复的DIV，并且此过程一直持续到ng-if最终在没有更多的孩子重复的情况下破裂。

html：

<div ng-controller='MyController' ng-app='myApp'>
    <li ng-repeat="person in var" ng-include="'categoryTree'"></li>
</div>
<script type="text/ng-template" id="categoryTree">
    {{ person.name }}
    <ul ng-if="person.children">
        <li ng-repeat="person in person.children" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>

参考：

1. angularjs递归模板