Question

我遇到了一些用于在AngularJS中附加文本的代码。但是，解析html时会出现问题。这是我显示文本的示例代码。

<span class="text" ng-bind-html="parseTrustedHtml(profile.bio)"></span>

如果未解析html，AngularJS在线提供的教程可以使用。也就是{{profile.bio}}，但这不是我想要的。

有没有我错过的方法我可以设置它，以便在说出500个字符和“看不到”选项之后有一个“看到更多”选项？

Answer 1

这对你有所帮助

<强> Plunker

尝试使用<p read-more>属性

进行装饰

app.directive('readMore', function() {
  return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<p></p>',
    scope: {
      moreText: '@',
      lessText: '@',
      words: '@',
      ellipsis: '@',
      char: '@',
      limit: '@',
      content: '@'
    },
    link: function(scope, elem, attr, ctrl, transclude) {
      var moreText = angular.isUndefined(scope.moreText) ? ' <a class="read-more">Read More...</a>' : ' <a class="read-more">' + scope.moreText + '</a>',
        lessText = angular.isUndefined(scope.lessText) ? ' <a class="read-less">Less ^</a>' : ' <a class="read-less">' + scope.lessText + '</a>',
        ellipsis = angular.isUndefined(scope.ellipsis) ? '' : scope.ellipsis,
        limit = angular.isUndefined(scope.limit) ? 150 : scope.limit;

      attr.$observe('content', function(str) {
        readmore(str);
      });

      transclude(scope.$parent, function(clone, scope) {
        readmore(clone.text().trim());
      });

      function readmore(text) {

        var text = text,
          orig = text,
          regex = /\s+/gi,
          charCount = text.length,
          wordCount = text.trim().replace(regex, ' ').split(' ').length,
          countBy = 'char',
          count = charCount,
          foundWords = [],
          markup = text,
          more = '';

        if (!angular.isUndefined(attr.words)) {
          countBy = 'words';
          count = wordCount;
        }

        if (countBy === 'words') { // Count words

          foundWords = text.split(/\s+/);

          if (foundWords.length > limit) {
            text = foundWords.slice(0, limit).join(' ') + ellipsis;
            more = foundWords.slice(limit, count).join(' ');
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }

        } else { // Count characters

          if (count > limit) {
            text = orig.slice(0, limit) + ellipsis;
            more = orig.slice(limit, count);
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }

        }

        elem.append(markup);
        elem.find('.read-more').on('click', function() {
          $(this).hide();
          elem.find('.more-text').addClass('show').slideDown();
        });
        elem.find('.read-less').on('click', function() {
          elem.find('.read-more').show();
          elem.find('.more-text').hide().removeClass('show');
        });

      }
    }
  };

信用额应转至pattycam

Answer 2

我能想到的一个简单方法是应用过滤器limitTo:limitvar

{{ 'some text' | limitTo:2 }} // displays "so"

并使用limitvar相应地更改ng-click变量。过滤器将限制limitvar设置的字符数。

更新

仍然有点天真并且它没有解决html标签问题，但我想不出有办法正确地做到这一点:)

limitvar = 50;
parseTrustedHtml(bio) {
  //...
  var item = $filter('limitTo')(bio, limitvar );
  return $sce.trustAsHtml(item);
}

http://plnkr.co/edit/m89p9gbx8jJ5Xhu2H8aI?p=preview

Answer 3

view-more-less是一个很小的angularjs指令，用于将任何列表转换为view-more-less列表。这也适用于延迟列表。 jQuery或其他库没有外部依赖性。

您需要做的就是将元素作为要转换的列表中的最后一项：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 ...
 <view-more-less />
</ul>

Answer 4

在控制器中

$scope.numLimit=100;
$scope.numLimitFlag = false;
$scope.readMore=function(flag){
  if(flag){
    $scope.numLimit=10000;
    $scope.numLimitFlag = flag;
  } else {
    $scope.numLimit=100;
    $scope.numLimitFlag = flag;
  }
};

以HTML格式

<span style="font-size:15px;">
  <label><b>Name</b></label>
  <b>{{myName | limitTo:numLimit}}</b>
  <a type='button' ng-if="!numLimitFlag" ng-click="readMore(true)">Read more</a> 
  <a type='button' ng-if="numLimitFlag" ng-click="readMore(false)">Read less</a>
</span>

在AngularJS中查看更多或查看更少

4 个答案:

更新