如何根据字符数显示/隐藏div？

Question

I am trying to implement a show more/show less functionality in my div depending on number of characters. Any ideas on how to do it using AngularJS? My div looks like follows:

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

If I want to show the "More" text only if the number of chars in the paragraph exceeds 250, how do I go about doing that?

Answer 1

From the code I understand you want to use it in some item description or article? Here is one solution:

 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> 

Its far from perfect but I haven't got time for anything better at the moment