我试图在div中实现一个显示更多/显示更少的功能,这取决于字符的数量。对于如何使用AngularJS实现它,有什么想法吗?我的div看起来如下:
<section class="notes" ng-if="MyController.notes">
<p ng-bind="MyController.notes" ng-class="{'showMore': more, 'showLess': !more}"></p>
<section class="readMore" ng-click="OtherController.toggleMoreText($event)">
<i class="icon-caret-down"></i>
<span ng-click="more = !more">{{more ? 'Less' : 'More'}}</span>
</section>
如果我只想在段落中的字符数超过250个时才显示“更多”文本,我该如何做呢?
发布于 2015-01-26 09:09:05
从代码中我了解到,您希望在某些项目描述或文章中使用它?这里有一个解决方案:
var myApp = angular.module('myApp',[]);
angular.module('myApp').controller('MyController',['$scope',function($scope){
$scope.notes = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
$scope.showAll = false;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
<section class="notes">
<p ng-class="{'show-full': showAll}" class="text">{{(!showAll)?notes.substring(0,150):notes}}</p>
<section class="readMore">
<i class="icon-caret-down"></i>
<a href="" ng-click="showAll = !showAll">{{showAll ? 'Less' : 'More'}}</a>
</section>
</div>
</div>
这远非完美,但我现在没有时间做任何更好的事情
https://stackoverflow.com/questions/28153365
复制