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