0

I'm trying to get a table to render with angularjs directives. The output I desire is to have child tr and th inside a tbody

<table>
  <thead>
    <tr>COL 1</tr>
    <tr>COL 2</tr>
    <th col="2">Title 1</th>
  </thead>
  <tbody ng-repeat="i in [1, 2, 3, 4]">
    <tr>
      <td>i.name</td>
      <td>i.value</td>
    </tr>
    <tr></tr>
  </tbody>
</table>

For the above table, I have some child content that should appear below any tr. The child content has th and tr's (the th content should appear only once above the list of its tr elements). And those child tr's can again have children. You get the point.

Here's what I've tried and observed.

I've used a custom attribute directive on the tr element.

app.directive('customDirective', ['$compile', function($compile){
  return {
    restrict: 'A',
    scope: {
      content: '='
    },
    link: function(scope, element) {
      // SOME LOGIC TO DECIDE IF THE TEMPLATE NEEDS TO BE RENDERED TO STOP MAX EXECUTION ERROR
      var template = '<tbody>
                        <th col="2">Title 1.1</th>
                        <tr custom-directive>
                          <td>content.name</td>
                          <td></td>
                        </tr>
                      </tbody>';
      element.parent().after($compile(template)(scope));
    }
  }
}]);

First issue: I'm having to use the tbody tag the second time only to use the CSS properties; I'm not sure why it isn't retaining the properties of the table.

Second issue: The second level child (Title 1.1.1) isn't rendering at all and there are no console errors.

Varun Verma
  • 213
  • 3
  • 12
  • Have you considered using ng-show or ng-hide and put your logic in there to show or hide child rows? – Artisan Jun 12 '19 at 02:51
  • Can you show me a sample? Do note I've got child objects and they have child objects too. – Varun Verma Jun 12 '19 at 04:59
  • My bad, your use case warrants more than ng-show and hide, you need recursion of sorts checkout this link https://stackoverflow.com/questions/14430655/recursion-in-angular-directives – Artisan Jun 13 '19 at 12:03

0 Answers0