用 ng-repeat 挑战重复 tr [英] Challenge repeating tr with ng-repeat

问题描述

我正在为一个特殊用例而苦苦挣扎.我在底部为您提供了一个 jsfiddle 片段.

1.HTML 表格

我的 HTML 是一个表格.ng-repeat 指令必须应用于 html 元素.在我的用例中，这无法完成，因为 ng-repeat 的实例由双 tr 元素组成:

<tr><td>文本</td></tr><tr><td tooltip="绑定到第一个 tr 的评论">悬停我</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/

解决方案

您可以使用 tbody 标签将多个 tr 组合在一起并使用 ngRepeat 对其进行循环.

http://jsfiddle.net/RkCMr/4/

<h3>如何使用 ng-repeat 重构它?</h3><table ng-controller="ctrl"><thead></thead><tbody ng-repeat="集合中的项目"><tr ng-click="showing=!showing"><td>点击</td><td>{{item}}</td></tr><tr ng-show="显示"><td>--></td><td>评论{{item}}<a tooltip="a tooltip comment {{item}}"><i class="icon-ok-sign"></i></a></td></tr></tbody>

顺便说一下，看起来你的代码仍然是 Jquery 的做事方式.即使你已经把它们放在一个指令中.如上例所示，根本不需要指令，也不使用 JQuery.

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

1. The HTML table

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 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. The Tooltip directive

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

3. MY GOAL

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/

解决方案

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>

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-repeat 挑战重复 tr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！