用ng-repeat挑战重复tr

Question

我正在努力解决一个特殊的用例。我在底部提供了一个jsfiddle代码段。

1. HTML表

我的HTML是一张桌子。ng-repeat指令必须应用于html元素。在我的用例中，这不能完成，因为ng-repeat的实例由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不提供语法ng-
repeat注​​释（与KnockoutJS不同）。我在SO上发现了类似的问题。但是，用例包括在元素内附加HTML。我的工作包括在ng重复的tr后面放置一个新的tr，但这只是无效。此外，还有一个新的东西要考虑。

2.工具提示指令

第二个tr嵌入了一个工具提示指令，该指令来自angular-ui-bootstrap。因此，纯jQuery方法可能不可行。

3.我的目标

我为您提供了一个根本不使用ng-repeat的代码段。我的目标是将ng-repeat应用于集合的每个元素。

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

Answer 1

您可以使用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。