Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 挑战重复tr与ng重复大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在努力与一个特殊的用例.我在底部提供了一个jsfiddle代码段.

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不提供语法重复注释(不同于KnockoutJS).我在SO上发现了类似的问题.然而,用例包括在元素中附加HTMl.我的矿将包括在Ng重复的tr之后放置一个新的tr,但它没有起作用.此外,还有一个新的东西要虑到.

2.工具提示指令

第二个tr嵌入一个工具提示指令,该指令取自角度引导.因此,纯粹的jQuery方法可能不可行.

我的目标

我向您提供一个使用Ng-repeat的代码段.我的目标是使用Ng-repeat应用于我的集合的每个元素.

http://jsfiddle.net/RkCMr/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.

大佬总结

以上是大佬教程为你收集整理的angularjs – 挑战重复tr与ng重复全部内容,希望文章能够帮你解决angularjs – 挑战重复tr与ng重复所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。