AngularJS ng-重复未知的深度数组

Question

我需要将可能的无限深数组结构打印到列表中。 这是经过修改的AngularJS示例的代码，在该示例中，我在数组中添加了一些更深的子级。 如何打印child of child ，甚至它的孩子？ 只要有更多的孩子，有没有办法让我永远重复下去？

的HTML

<div ng-app>
  <div ng-controller="TodoCtrl">
    <ul>
      <li ng-repeat="todo in todos">
        <span>{{todo.text}}</span>
        <ul>
          <li ng-repeat="child in todo.children">
            <span>{{child.text}}</span>
            <!-- What about the next one -->
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

JS

function TodoCtrl($scope) {
  $scope.todos = [{
    text: 'root 1',
    children: [{
      text: 'child of root 1',
      children: [{
        text: 'child of child',
        children: []
      }]
    }]
  }, {
    text: 'root 2',
    children: []
  }];
}

小提琴： https : //jsfiddle.net/U3pVM/25866/

Answer 1

您可以通过这种方式递归使用视图：

<script type="text/ng-template" id="todo.html">
    <div>
        <div>{{ todo.text }}</div>
        <ul>
            <li ng-repeat="todo in todo.children" ng-include="'todo.html'"></li>
        </ul>
    </div>
</script>

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="todo in todos" ng-include="'todo.html'"></li>
  </ul>
</div>

这里是基于您的样本数据的DEMO 。