Recusive table

by hubnerd

HTML

<div ng-app="app" ng-controller='AppCtrl'>
  <script type="text/ng-template" id="rloop">
    <td>{{data.Name}}</td>
    <td>{{data.Value}}</td>
    <tr ng-repeat="data in data.Children" ng-include src="'rloop'"></tr>
  </script>

  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Value</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="data in report" ng-include="'rloop'"></tr>
      <tr ng-repeat-end></tr>
    </tbody>
  </table>
  </div>

JavaScript

var app = angular.module('app', []);

app.controller('AppCtrl', function ($scope) {

  $scope.report = [{
      'Name': 'Moo',
      'Value': 'MooV',
      'Children': [{
        'Name': 'Moo2',
        'Value': 'Moo2V',
        'Children': [{
          'Name': 'Moo3',
          'Value': 'Moo3V'
        }]
      }]
    }];
});