AngularJS ng-repeat一個未知的深度陣列

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根據您的示例數據。