1

I'd like to display some multi level nested groups and their elements in a table. Therefore I created the following template and directive:

<script type="text/ng-template" id="groupRenderer.html">
<tr>
    <td>
        {{group.name}}
    </td>
</tr>
<tr ng-repeat="element in group.elements">
    <td>
        {{element.name}}
    </td>
</tr>

<group ng-repeat="group in group.subGroups"/>


app.directive('group', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "groupRenderer.html"
    }
})

In my view I insert my table and start the recursive directive call.

<table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <group ng-repeat="group in groups">
</table>

It doesn't work this way because AngularJS doesn't allow you to create a replace directive with more than one root node.

My question is what is the best way to achieve that all groups and elements are displayed in the table.

brennerm
  • 73
  • 7
  • Possible duplicate of [Recursion in Angular directives](http://stackoverflow.com/questions/14430655/recursion-in-angular-directives) – Reactgular Oct 15 '15 at 13:56
  • 1
    @ThinkingMedia nope because 'table' has specials behaviour. I've read a lot of stackoverflow questions about this and I'm here with not solution... – Hornth Oct 15 '15 at 17:51

0 Answers0