web-dev-qa-db-fra.com

Défiez répéter tr avec ng-repeat

Je me bats avec un cas d'utilisation spécial. Je vous fournis un extrait jsfiddle en bas.

1. Le tableau HTML

Mon HTML est un tableau. La directive ng-repeat Doit être appliquée à un élément html. Dans mon cas d'utilisation, cela ne peut pas être fait car une instance de ng-repeat est composée d'un élément double 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 ne fournit pas de commentaire syntaxique ng-repeat (contrairement à KnockoutJS). J'ai trouvé des questions similaires sur SO. Cependant, le cas d'utilisation consistait à ajouter du HTML à l'intérieur d'un élément. La mienne consisterait à placer un nouveau tr après le ng répété, mais cela n'a tout simplement pas fonctionné. En plus, il y a un nouveau truc à prendre en compte.

2. La directive Tooltip

Le deuxième tr intègre une directive info-bulle, qui est extraite de angular-ui-bootstrap. Par conséquent, une approche jQuery pure peut ne pas être possible.

3. MON OBJECTIF

Je vous fournis un extrait de code qui n'utilise pas du tout ng-repeat. Mon objectif est d'utiliser ng-repeat appliqué à chaque élément de ma collection.

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

angularjsangularjs-directiveangular-uiangularjs-ng-repeat
15
roland

Vous pouvez utiliser la balise tbody pour regrouper plusieurs tr ensemble et utiliser ngRepeat pour boucler dessus.

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>

Soit dit en passant, il semble que votre code soit toujours à la manière de Jquery. Même vous les avez mis dans une directive. Comme le montre l'exemple ci-dessus, une directive n'est pas du tout nécessaire et JQuery n'est pas utilisé.

33
David Lin

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, c'est beaucoup mieux que de répéter l'élément tbody.

41
akn

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/

2
Sushrut