仅显示有限数量的包含HTML的文本

Question

我使用AngularJS，我正在寻找一种方法，该方法将允许我破坏HTML标记并仅显示其中的10行，最后带有链接“ ...查看更多”。例如，我有这样的内容

<div ng-bind-html="myText | cutText"></div>

其中cutText是将执行上述操作的过滤器。我知道我可以使用一些方法，例如计算字母等，但是它显然不能很好地与HTML结合使用，最终我可能会遇到链接断开和img标签等问题。我也知道我可以使用正则表达式来确定标签，但是我只是想知道是否有简单的Anulgarjs方法来完成此操作？

Answer 1

尝试以下。我创建了一个属性来维护极限值，并根据单击的按钮进行更改。您可以使用以下代码创建component或directive并使其可重复使用。

(() => {
  let app = angular.module('myapp', []);
  
  app.controller('MyCtrl', ['$scope', ($scope) => {
  	$scope.content = 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.';
    
    $scope.limit = 20;
    
    $scope.showMore = () => {
      $scope.limit = 1000;
    }
    
    $scope.showLess = () => {
      $scope.limit = 20;
    }
  }]);
})();

a {
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myapp">

  <div ng-controller="MyCtrl">
    {{ content | limitTo: limit}}
    
    <a id="showMore" ng-if="limit===20" ng-click="showMore()" href="#">Show More</a>
    
    <a id="showLess" ng-if="limit!==20" ng-click="showLess()" href="#">Show Less</a>
  </div>

</div>