在ng-repeat

时间:2015-08-23 00:03:47

标签: angularjs

我的应用程序中有一个评论部分,我正在重复。我试图解释有大量评论的情况。我的想法是隐藏所有评论,除​​了少数几个,然后在评论部分的底部做一​​个链接说"更多评论(总计)"。当用户点击更多评论时,它将显示其余的ng-repeat项目。

到目前为止,我已经能够通过简单地说ng-show =" $ index<来隐藏其余的评论。 3"但是,在用户点击“更多评论”之后,我还没有想出更多显示方式。我被困在如何在多个参数上进行ng-show。我原本以为我可以使用ng-click将变量设置为true,然后将其用作ng-show的第二个参数,但这似乎不起作用。

<ul>
  <li ng-repeat="comment in comments" ng-show="$index < 3 || showMore"> {{ comment }}</li>
</ul>
<a ng-click="showMore">More Comments(25)</a>

1 个答案:

答案 0 :(得分:3)

它似乎对我很好

https://jsfiddle.net/hqqpj9xw/

虽然使用您当前的技术,您不必将所有评论添加到dom并观看它们。更有效的解决方案是使用limitTo过滤器。

<div ng-app ng-init="comments = [1,2,3,4,5]">
    <div ng-repeat="item in comments | limitTo:showMore ? comments.length : 3">
        comment
    </div>
    <button ng-click="showMore = true">show more</button>
</div>

https://jsfiddle.net/zrw6dfgc/1/