你如何根据字符数 show/hide a div？

Question

我正在尝试根据字符数在 div 中实现显示 more/show 更少的功能。关于如何使用 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 时显示 "More" 文本，我该怎么做？

Answer 1

从代码中我了解到您想在某些项目描述或文章中使用它？这是一种解决方案：

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>

它远非完美，但我现在没有时间做更好的事情

你如何根据字符数 show/hide a div？

How do you show/hide a div depending on character count?

html

javascript

css

angularjs