与NG重复挑战重复TR [英] Challenge repeating tr with ng-repeat

问题描述

我有特殊用例挣扎。我为你提供在底部的jsfiddle片段。

I'm struggling with a special use case. I provide you with a jsfiddle snippet at the bottom.

1。 HTML表格

我的HTML是一个表。 NG-重复指令必须应用到HTML元素。在我的使用情况下，这能不能做到为NG-重复的实例组成双tr元素的：

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不提供语法NG重复评论（不像KnockoutJS）。我发现这样类似的问题。然而，用例的组成元素中追加的HTML。煤矿将由放置一个新潮流的NG-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。该工具提示指令

第二TR嵌入一个工具提示指令，它是由角UI的引导服用。因此，一个纯粹的jQuery的方法可能是不可行的。

The second tr embeds a tooltip directive, which is taken from angular-ui-bootstrap. Therefore a pure jQuery approach may not be feasible.

3。我的目标

我为你提供不使用NG重复所有一个code片段。我的目标是使用应用到我的收藏中的每个元素NG-重复。

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/

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

推荐答案

您可以使用TBODY标签为groupping多个TR在一起，在它使用ngRepeat循环。

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>

顺便说一句，它看起来像你的code仍然在做事情的方式jQuery的。即使你把它们放在一个指令。如在上面的例子中所示，一个指令是不是在所有必要的和未使用的JQuery

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.

这篇关于与NG重复挑战重复TR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！