Herausforderung Wiederholung tr mit ng-Wiederholung

Question

Ich habe mit einem speziellen Anwendungsfall zu kämpfen. Ich stelle dir unten einen kleinen Ausschnitt zur Verfügung.

1. Die HTML-Tabelle

Mein HTML ist eine Tabelle. ng-repeat Direktive muss auf ein HTML-Element angewendet werden. In meinem Anwendungsfall kann dies nicht als eine Instanz von ng-repeat erfolgen besteht aus einem Doppel tr Elements zusammengesetzt:

<!-- 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 bieten keinen syntaktischen ng-repeat Kommentar (im Gegensatz zu KnockoutJS). Ich habe ähnliche Fragen zu SO gefunden. Der Anwendungsfall bestand jedoch darin, HTML in ein Element einzufügen. Meins würde darin bestehen, einen neuen tr nach dem ng-wiederholten tr zu platzieren, aber es hat einfach nicht funktioniert. Außerdem gibt es neue Dinge zu beachten.

2. Die Tooltip Richtlinie

Der zweite tr eine Tooltip Richtlinie einbettet, die aus Winkel-ui-Bootstrap genommen wird. Daher ist ein reiner jQuery-Ansatz möglicherweise nicht durchführbar.

3. Mein Ziel

biete ich Ihnen mit einem Code-Schnipsel, die nicht bei allen ng-repeat verwenden. Mein Ziel ist es, ng-repeat auf jedes Element meiner Sammlung anzuwenden.

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

Answer 1

Sie können tbody-Tag für groupping mehrere tr zusammen und verwenden ngRepeat Schleife über sie verwenden.

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, es sieht aus wie Sie Ihren Code, Dinge zu tun noch in JQuery Weg. Selbst du hast sie in eine Direktive eingefügt. Wie im obigen Beispiel gezeigt, ist eine Anweisung überhaupt nicht erforderlich und JQuery wird nicht verwendet.

Answer 2

Hier ist die Lösung dafür.

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

Es ist auch möglich, es mit ng-repeat-start und ng-repeat-end Richtlinien zu tun:

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

Meiner Meinung nach ist es viel besser als tbody Element zu wiederholen.