Défi de répéter tr avec ng-repeat

Je suis aux prises avec un cas d'utilisation. Je vous fournir un jsfiddle extrait en bas.

1. Le tableau HTML

Mon HTML est un tableau. ng-repeat directive doivent être appliquées à un élément html. Dans mon cas d'utilisation, cela ne peut être fait comme une instance de ng-repeat est composé d'un double élément tr:

<!-- 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 n'est pas un syntaxiques ng-repeat commentaire (contrairement à KnockoutJS). J'ai trouvé des questions similaires sur. Cependant, le cas d'utilisation se composait d'ajout de code HTML à l'intérieur d'un élément. Mine consisterait à placer une nouvelle tr après la ng-répété tr, mais ça ne fonctionne pas. En outre, il y a un nouveau truc à prendre en compte.

2. L'info-bulle de la directive

La deuxième tr intègre une info-bulle de la directive, qui est pris dans angular-ui-bootstrap. Donc un pur jQuery approche peut ne pas être faisable.

3. MON OBJECTIF

Je vous fournir un extrait de code qui n'utilise pas de ng-repeat. Mon but est d'utiliser ng-repeat appliquée à chaque élément de ma collection.

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

source d'informationauteur roland

  1. 33

    Vous pouvez utiliser la balise tbody pour groupping multiples tr ensemble et utiliser ngRepeat en boucle.

    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>

    Par le chemin, il ressemble à votre code est toujours en Jquery façon de faire les choses. Même vous les ai mis dans une directive. Comme illustré dans l'exemple ci-dessus, une directive n'est pas nécessaire à tous et JQuery n'est pas utilisé.

  2. 40

    Il est également possible de le faire avec ng-repeat-start et 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>

    À mon avis, il est beaucoup mieux que de répéter tbody élément.

  3. 2

    Voici la solution pour cela. 

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