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 }

Answer 2

我会使用ng-class指令。（此处的文档：https://docs.angularjs.org/api/ng/directive/ngClass）

所以这就像切换一个名为“showMore”的类，你需要在p元素中绑定

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

在css中，只需使用showMore应用所需的样式即可。 ng-class使用表达式，因此showMore将为true或false。在控制器中，你想绑定点击按钮来切换变量showMore ......就像这样：

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

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

2 个答案: