Question

我正在尝试在我的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>

如果我想展示＆＃34;更多＆＃34;文本只有当段落中的字符数超过250时，我该怎么做？

Answer 1

从我理解的代码中你想在一些项目描述或文章中使用它？这是一个解决方案：

＆＃13;

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;
}]);

＆＃13;

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

＆＃13;

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

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

1 个答案: