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，其中包含我们提供的模板（{{1} }），然后将填充第一级名称 categoryTree然后使用ng-if，它基本上检查级别是否包含子属性。有关ng-if的重要信息。

请注意，使用ngIf删除元素时，其范围将被销毁，并且在还原元素时会创建新范围。在ngIf中创建的作用域使用原型继承从其父作用域继承。这一点的一个重要含义是，如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语。在这种情况下，对子作用域内的变量所做的任何修改都将覆盖（隐藏）父作用域中的值。

上面的行取自Angular ng-if Documentation

所以我要说的是，在{{ person.name }}标记内，还有另一个ng-if具有相同的变量名称（ng-repeat），所以自person以来创建一个新范围，因此此处不存在先前的变量ng-if，因此将其视为新变量。因此，我们得到重复的div，并且这个过程一直持续到person最终在没有更多孩子重复的情况下中断。

<强> HTML：

ng-if

<强>参考文献：

AngularJS Recursive Templates

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

1 个答案: