15

我正在为一个特殊的用例而苦苦挣扎。我在底部为您提供了一个 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 不提供语法 ng-repeat 注释（与 KnockoutJS 不同）。我在 SO 上发现了类似的问题。然而，用例包括在元素内附加 HTML。我的将包括在 ng-repeated tr 之后放置一个新的 tr，但它只是没有用。此外，还有一个新的东西需要考虑。

2. Tooltip 指令

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

3. 我的目标

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

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

4

3 回答 3

42

也可以使用ng-repeat-startandng-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元素要好得多。

于 2014-12-09T14:25:39.483 回答
36

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

于 2013-08-07T07:52:07.390 回答
2

这是解决方案。

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

于 2013-08-07T07:58:40.503 回答