Angularjs: ng-repeat and ng-switch on tr tags

Question

I'm trying to use AngularJS to create a table of a list of events. But each event has a type, and events of different types have drastically different contents, and some types also generate more than one row.

In a perfect world, I'd do this:

<tbody>
  <ng-repeat="event in events">
    <ng-switch on="event.type">
      <ng-switch-when="type1">
        <tr>
          ...
        </tr>
        <tr>
          ...
        </tr>
      </ng-switch-when>
      <ng-switch-when="type2">
        <tr>
          ...
        </tr>
      </ng-switch-when>
      ...
    </ng-switch>
  </ng-repeat>
</tbody>

but this won't work because most browsers will discard or relocate the ng tags to enforce that the tbody only contains trs.

The only solution I've seen to related problem ( How to use ng-repeat without an html element ) is to have multiple tbody elements; I'd prefer not to do that, but even if I do this, giving the tbody the ng-repeat and ng-switch attributes, I still have the problem that I can't wrap multiple trs in a single ng-switch-when.

Is there a way to do this in AngularJS, or is this impossible?

Answer 1

I've run into this problem, best advice is don't use table:

just do a parent div id with * ammount of child div classes just like they are tr's and td's...

i haven't checked this in angular source but i'm assuming that the table elements aren't intertwined somehow, who knows..

Answer 2

Maybe the best option would be a directive that generates the appropriate markup based on your type1/type2?

You could probably also do it with ng-hide/ng-show, though that would generate extra unnecessary markup