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

Question

I need to increase the height of ap element when I click a "Show More" button, which then should say "Show less" and then reduce the size of the p element when I click the button again. What is the best way to do this in Angular?

This is the structure of my paragraph and button -

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

Answer 1

Template

 <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 }

Answer 2

I would use ng-class directive. (documentation here: https://docs.angularjs.org/api/ng/directive/ngClass )

So it would be something like toggling a class called "showMore" that you need to bind in the p element

<p ng-class="showMore">Stuff here</p>
<button ng-click="showMoreClick">{{ showMore ? 'Show Less' : 'Show More'}}</button>

And in css, just apply the styles you want with showMore. ng-class works with an expression so showMore will either be true or false. in the controller, you want to tie the click button to toggling the variable showMore...something like this:

$scope.showMore(false) // initializing showMore to false (minimized first)
$scope.showMoreClick = function () {
    $scope.showMore(!$scope.showMore()); // toggle showMore
};