如何在元素上使用截断并使用 angular 阅读更多按钮？

Question

我正在尝试使用 angular truncate 来截断一些元素。我知道如何通过 {{something.something | characters:50}} 截断单词。但是我想做的是，例如，我有一个粗体文本  Comfortable  然后我列出了 3 个其他功能  空调 安全 快

我想添加一个读我按钮。现在我想要的基本上只是 "Comfortable" 一开始是可见的，但是当有人点击阅读更多按钮时，它将展开并显示其余的 3 。我怎样才能做到这一点？我不想在这里使用 jQuery。这可以在 angular 中完成吗？

Answer 1

很容易实现。您还应该在控制器中初始化 readmore。

<div>
   <span >Comfortable</span>
   <span ng-show="readmore"> Air conditioned </span> 
   <span ng-show="readmore"> Safe </span>
   <span ng-show="readmore"> Fast </span>
   <div ng-hide="readmore" ng-click="readmore = true">Read more</div>
   <div ng-show="readmore" ng-click="readmore = false">Read less</div>
</div>

Answer 2

如果可能的话，把这个标签覆盖你所有的范围（粗体除外）

<a ng-click="isShowMore = !isShowMore" ng-hide="isShowMore">Show More</a>
 <div ng-show="isShowMore">
    <span> Air conditioned </span>
 </div>
<a ng-click="isShowMore = !isShowMore" ng-show="isShowMore">Show Less</a>

Answer 3

您可以简单地使用 ng-hide 、 ng-show 或 ng-if 。

<b> Comfortable </b>
<button ng-click="visible = true">Read More...</button>
<div ng-show="visible">
   <span>...</span> 
   <span>...</span>
   <span>...</span>
</div>

如何在元素上使用截断并使用 angular 阅读更多按钮？

How to use truncating on elements and read more button with angular?

html

truncate

angularjs