Challenge repeating tr with ng-repeat

Question

I'm struggling with a special use case. I provide you with a jsfiddle snippet at the bottom.

1. The HTML table

My HTML is a table. ng-repeat directive must be applied to an html element. In my use case, this cannot be done as an instance of ng-repeat is composed of a double tr element:

<!-- ng-repeat the following block n times -->
<tr>
 <td>text</td>
</tr>
<tr>
 <td tooltip="comment that is bound to the first tr">hover me</td>
</tr>

AngularJS doesn't provide a syntactic ng-repeat comment (unlike KnockoutJS). I found similar questions on SO. However the use case consisted of appending HTML inside an element. Mine would consist of placing a new tr after the ng-repeated tr, but it just didn't work. Besides, there is a new stuff to take into account.

2. The Tooltip directive

The second tr embeds a tooltip directive, which is taken from angular-ui-bootstrap. Therefore a pure jQuery approach may not be feasible.

3. MY GOAL

I provide you with a code snippet that doesn't use ng-repeat at all. My goal is to use ng-repeat applied to each element of my collection.

http://jsfiddle.net/RkCMr/1/

Solution 1

You can use tbody tag for groupping multiple tr together and use ngRepeat to loop over it.

http://jsfiddle.net/RkCMr/4/

<div ng-app="challenge">
    <h3>how can I refactor it out using ng-repeat?</h3>
    <table ng-controller="ctrl">
        <thead></thead>         
        <tbody ng-repeat="item in collection">
            <tr ng-click="showing=!showing">
                <td>click</td>
                <td>{{item}}</td>
            </tr>
            <tr ng-show="showing">
                <td>--></td>
                <td>comment {{item}}
                    <a tooltip="a tooltip comment {{item}}">
                        <i class="icon-ok-sign"></i>
                    </a>
                </td>                
            </tr>
        </tbody> 
    </table>    
</div>

By the way, it looks like your code is still in Jquery way of doing things. Even you've put them in a directive. As shown in the example above, a directive is not necessary at all and JQuery is not used.

Solution 2

It is also possible to do it with ng-repeat-start and ng-repeat-end directives:

<table>
  <tr ng-repeat-start="item in items">
    <td>first</td>
    <td>row</td>
  </tr>
  <tr ng-repeat-end>
    <td>second</td>
    <td>row</td>
  </tr>
</table>

In my opinion it is much better than repeating tbody element.

Solution 3

Here is the solution for this.

<div ng-app="challenge">
<h3>how can I refactor it out using ng-repeat?</h3>
<table ng-controller="ctrl">
    <thead></thead>
    <tbody ng-repeat="l in collection">
        <tr ng-click="isRowCollapsed=!isRowCollapsed">
            <td>click</td>
            <td>{{l}}</td>
        </tr>
        <tr ng-hide="isRowCollapsed">
            <td>--></td>
            <td>comment {{l}}
                <a tooltip="a tooltip comment {{l}}">
                    <i class="icon-ok-sign"></i>
                </a>
            </td>                
        </tr>            
    </tbody>
</table>    

http://jsfiddle.net/RkCMr/7/

Comments

[roland]

Fantastic! I didn't know that multiple tbody tag was allowed (only tr in my need-to-upgrade-mind). Thanks a lot :) Yeah my solution was jquery-ish as I thought my specific use case couldn't be solved using ng-repeat :o

[Anandaraja_Srinivasan]

Was just wondering why ng-repeat was used on tbody and not on tr. Found the reason to be existing issue with <tr> github.com/angular/angular.js/issues/1459

[hgoebl]

^^^^^ this is a much better solution than the accepted answer. Don't repeat over tbody!

[jward01]

As hgoebl said, this is the best answer. I am shocked to see so many people recommending ng-repeat on tbody. that is BAD practice. it casuse extra padding/rows to appear on the styling.

[shanemgrey]

Until angular 1.2 this method wasn't available.

[Maccurt]

This should be the new best answer

[L1ghtk3ira]

Thanks. Wasn't sure I could do it like that.

[German]

i'm also the one who at first completely anticipated this approach - old school. But than I found that repeated tbody is also fine by w3c. So grouping the rows per tbody is also good for readability.