angularjs - 在 ng-repeat 中显示/隐藏元素

Question

我正在对我的应用程序进行 ng-repeat-ing 评论部分。我正在尝试解释有大量评论的情况。我的想法是隐藏除少数评论之外的所有评论，然后在评论部分的底部创建一个链接，上面写着“更多评论(总计)”。当用户点击更多评论时，它会显示剩余的 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>

Answer 1

我觉得还不错

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/