Challenge repeating tr with ng-repeat

angular-ui, angularjs, angularjs-directive, angularjs-ng-repeat

Solution

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.

Problem

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/

Original source