javascript - Angularjs: ng-repeat and ng-switch on tr tags - Stack Overflow

admin管理员组

文章数量:1391804

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?

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?

• javascript
• angularjs
• html-table
• ng-switch

Share Improve this question Follow edited Jun 20, 2017 at 18:07 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 27, 2013 at 13:47 dplepagedplepage 9311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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..

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

本文标签： javascriptAngularjs ngrepeat and ngswitch on tr tagsStack Overflow