HTML

Question

这里是一个无效的小代码。我需要根据按钮点击显示和隐藏一个参数。

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

var app=angular.module('ang_app', []);
    app.controller('CtrMain', function($scope) {
});

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

请参阅我的jsfiddle https://jsfiddle.net/tridip/qg81dego/1/并告诉我代码中缺少的内容。

Answer 1

HTML

<div ng-init="more = false" ng-app="ang_app" ng-controller="CtrMain">
        <p ng-class="{'showMore': more, 'showLess': !more}">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


        </p>
        <button ng-click="more = !more">{{more ? 'Show Less' : 'Show More'}}</button>
     </div>

CSS：

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

它现在正在工作。

Answer 2

如果要显示和隐藏段落，则必须设置属性display:none in showLess类和display:block in showMore类或者您可以相应地设置visibility:hidden和visibility:visible。

您还可以使用ng-show，ng-hide和ng-if。

<p ng-show="more">Bla bla bla</p>

我希望这会对你有所帮助。

AngularJS：显示或多或少不起作用

2 个答案:

HTML

CSS：