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

Answer 1

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/

Answer 2

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.

Answer 3

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.