AngularJS未知のディープアレイを繰り返す

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> 

サンプルデータに基づいて