javascript - 如何在 AngularJS 中动态增加/减少段落元素的高度？

Question

当我单击“显示更多”按钮时，我需要增加 p 元素的高度，然后应该显示“显示更少”，然后当我再次单击该按钮时减小 p 元素的大小。在 Angular 中执行此操作的最佳方法是什么？

这是我的段落和按钮的结构 -

<p ng-bind="MyController.notes"></p>
<button class="button show-button" ng-click="MyController.showMore()">Show More</button>

Answer 1

模板

 <div ng-init="more = false">
    <p ng-class="{'showMore': more, 'showLess': !more}">
        bla bla bla.
    </p>
    <button ng-click="more = !more">{{more ? 'Show Less' : 'Show More'}}</button>
 </div>

CSS

 .showMore { height: auto; }
 .showLess { max-height: 100px; overflow: hidden }