在 ng-repeat 中运行几个未知的 ng-repeat

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

希望我清楚这一点。

感谢您的宝贵时间:)

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 Documentation

所以我想说的要点是，在ng-if 标签内还有另一个ng-repeat 具有相同的变量名（person），所以由于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 Recursive Templates