Question

我想根据<p>中的文字ng-repeat来限制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

Answer 1

在过去，我使用了两种不同的技术来解决这个问题。有时我会根据固定的长度连接字符串的长度。

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

然后你可以创建一个指令来检测元素的实际高度，并告诉你max-height是否隐藏了元素的一部分。
（你可以这样做：https://stackoverflow.com/a/143889/230377）

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

＆＃34的css;看到更多＆＃34;元素看起来像这样：

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

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

抱歉，我想在我的一个github回购中添加一个链接到这个实例，但我现在找不到了...希望这会有所帮助。

Answer 2

所以你似乎有两个问题：

限制你的号码。 <p>标记中的行：那么您可以尝试上一个评论中的建议，也可以在ng-repeat中使用$ index选项跟踪。
更改应用于所有注释：在ng-click方法中，传递要应用更改的元素的id / object。使用ng-repeat的$ index功能创建/定义ID。

按角度ng-repeat

2 个答案: