web-dev-qa-db-ja.com

ng-repeatで繰り返しtrに挑戦

特殊なユースケースで苦労しています。下部にjsfiddleスニペットを提供します。

1。 HTMLテーブル

私のHTMLはテーブルです。 ng-repeatディレクティブは、html要素に適用する必要があります。私の使用例では、ng-repeatのインスタンスが二重の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は（KnockoutJSとは異なり）構文のng-repeatコメントを提供しません。 SOで同様の質問を見つけました。ただし、ユースケースは要素内にHTMLを追加することで構成されていました。鉱山は、ngが繰り返されたtrの後に新しいtrを配置することで構成されますが、それはうまくいきませんでした。その上、考慮すべき新しいものがあります。

2。 Tooltipディレクティブ

2番目のtrは、angular-ui-bootstrapから取得したツールチップディレクティブを埋め込みます。したがって、純粋なjQueryアプローチは実行できない場合があります。

3。私の目標

Ng-repeatをまったく使用しないコードスニペットを提供します。私の目標は、コレクションの各要素に適用されたng-repeatを使用することです。

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

angularjsangularjs-directiveangular-uiangularjs-ng-repeat
15
roland

Tbodyタグを使用して複数のtrをグループ化し、ngRepeatを使用してそれをループできます。

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>

ちなみに、あなたのコードはまだJqueryの方法で動いているようです。あなたもそれらをディレクティブに入れました。上記の例に示すように、ディレクティブはまったく必要なく、JQueryは使用されません。

33
David Lin

ng-repeat-startおよびng-repeat-endディレクティブを使用してこれを行うこともできます。

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

私の意見では、tbody要素を繰り返すよりもはるかに優れています。

41
akn

これに対する解決策は次のとおりです。

<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