按角度ng重复中的行限制文本大小

Limit text size by lines in angular ng-repeat

本文关键字：文本 ng      更新时间：2023-09-26

我想根据ng-repeat中的文本限制<p>的行数，我的ng-repeat loop:

<ul class="list-unstyled">
     <li ng-repeat="comment in ad.comments>
          <p id="moreButton"> {{comment.text | limitTo: CommentTextLimit}}
               <a ng-show="comment.text.length>25"> <span id="moreLess" span ng-click="changeLength(CommentTextLimit)" >{{moreLessText}}</span></a>           
          </p>
     </li>
</ul>

我想限制comment.text字段，如果用户单击show more按钮，会出现更多的行，第一个问题是任何更改都适用于所有注释，而不是一个，第二个问题是我想按行而不是按comment.text.length 进行限制

过去我使用了两种不同的技术来解决这个问题。有时我只是将字符串的长度按照固定的长度连接起来。

既然你说你不想使用这种技术，我做过几次的另一种方法是将css样式max-height和overflow:hidden添加到边界元素中。

然后，您可以创建一个指令来检测元素的实际高度，并判断元素的一部分是否因max-height而隐藏
（您可以这样做：https://stackoverflow.com/a/143889/230377)

如果元素"溢出"，则意味着部分文本被隐藏，然后我会在边界元素的右下角显示一个"查看更多"链接
我会使用css（而不仅仅是内联添加）将这个元素放在右下角

"see more"元素的css应该是这样的：

.see-more-link {
  position:absolute;
  bottom:0; right:0;
}

您还需要将边界元素设置为具有position:relative。

对不起，我想在我的一个github转发中添加一个链接到这方面的工作示例，但我现在找不到。。。希望这能有所帮助。

所以这里似乎有两个问题：

  1. 限制你在<p>标签中的行数：为此，你可以尝试上一条评论中的建议，也可以在你的ng repeat中使用track-by-$index选项
  2. 将更改应用于所有注释：在您的ng-click方法中，传递要将更改应用到的元素的id/对象。使用ng-reeat的$index功能创建/定义id
相关文章：