Question

I am using Angular.js for an application that uses hidden trs to simulate a sliding out effect by showing the tr and sliding down the div in the td below. This process worked fantastically using knockout.js when iterating over an array of these rows, because I could use <!-- ko:foreach --> around both tr elements.

With angular, ng-repeat must be applied to an html element, meaning I cannot seem to repeat these double rows using standard methods. My first response to this was to create a directive to represent these double trs, but that fell short because directive templates must have a single root element, but I have two (<tr></tr><tr></tr>).

If anyone with experience with ng-repeat and angular who has cracked this can explain how to solve this problem, I would be greatly appreciative.

(I should also note that attaching ng-repeat to the tbody is an option, but this produces multiple tbodys, and I am assuming that is bad form for standard HTML, although correct me if I’m wrong)

Answer 1

Using ng-repeat on tbody appears to be valid see this post.

Also a quick test through an html validator allowed multiple tbody elements in the same table.

Update: As of at least Angular 1.2 there is an ng-repeat-start and ng-repeat-end to allow repeating a series of elements. See the documentation for more information and thanks to @Onite for the comment!