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

Question

我正在尝试使用angular truncate截断一些元素。我知道如何通过{{something.something | characters:50}}截断单词。但我想做的是，例如，我有一个粗体文字<b> Comfortable </b>，然后我列出了其他3个功能<span> Air conditioned </span> <span> Safe </span>
<span> Fast </span>

我想添加一个“阅读我”按钮。 现在我想要的只是＆＃34;舒适＆＃34;将首先显示，但当有人点击阅读更多按钮时，它将被展开并显示其余3。我怎样才能做到这一点？我不想在这里使用jQuery。这可以用角度来完成吗？

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>