是否有阅读更多/更少文本的基本角度指令

Posted 2023-02-27

【中文标题】是否有阅读更多/更少文本的基本角度指令

【英文标题】：Is there a basic angular directive for read more/less Text

【发布时间】：2016-03-24 06:57:21

【问题描述】：

我一直在考虑制作一个角度指令，如果它有超过一定数量的字符（例如 115 个），它将缩短段落或 div。

我找不到任何对我有用的东西，我见过 http://dotdotdot.frebsite.nl/ 并且对某些人有用，但我正在尝试使用 angular 指令而不是 JQuery 来实现。

如果有人可以提供任何帮助，将不胜感激，我基本上没有想法。

这是我的视图设置方式：

<div class="Description"
<div class="Content">
    <div data-ng-bind-html="item.Description"></div>
</div>

我最初是通过像这样将它作为 jquery 来使它工作的，但不建议只使用 jquery 和 angular

$(function () 

var maxHeight = 115;
var moretext = Localization.Shared.InstitutionProfileStrings.ShowMore();
var lesstext = Localization.Shared.InstitutionProfileStrings.ShowLess();
$('.__Description').each(function () 
    var content = $(this).find(".__Content");
    var anchor = $(this).find(".morelink");

    if ($(content).height() > maxHeight) 
        $(this).addClass("less");
        $(anchor).html(moretext);
        $(anchor).show();
    
    else 
        $(anchor).hide();
    
);
$(".morelink").click(function (e) 
    e.preventDefault();
    var parent = this.parentElement;
    if ($(parent).hasClass("less")) 
        $(parent).removeClass("less");
        $(this).html(lesstext);
        $(parent).addClass("more");
    
    else if ($(parent).hasClass("more")) 
        $(parent).removeClass("more");
        $(this).html(moretext);
        $(parent).addClass("less");
    
    return false;
 );
);

【问题讨论】：

可能使用自定义过滤器，如这里的答案所示：***.com/questions/18095727/…

您要隐藏额外的文字还是移除额外的文字？

我想隐藏额外的文字，然后当点击更多的文字时，它会显示其余的文字

【参考方案1】：

我认为您正在寻找的是ng-class。您可以使用它来添加和删除基于布尔表达式的类，这基本上就是您使用 jQuery 实现所做的事情。例如：

HTML：

<div ng-app="testapp" ng-controller="testctrl">
  <div class="content" ng-class=" less: hidden ">
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  Now is the time for all good men to come to the aid of the party.
  </div>
  <button ng-click="hidden = !hidden">hidden ? 'Show' : 'Hide'</button>
</div>

JS：

var app = angular.module('testapp', []);
app.controller('testctrl', function ($scope) 
    $scope.hidden = true;
);

您可以结合使用ng-click 和插值来修改更多/更少链接。

这是一个显示它工作的小提琴：https://jsfiddle.net/8xjxaz28/

【讨论】：

这正是我所需要的，我实现了你在中间放置的东西，它完全按照我的需要工作。感谢您的帮助。

我只有一个问题，如果我希望它只在有可以隐藏的文本时显示，我该怎么做？例如，如果有一个 150 个字符长的段落，则显示文本将显示允许您单击。例如，如果有 60 个字符，则文本不会显示，因为它没有什么可隐藏的。

在这种情况下，您可能需要创建自己的指令。指令通常是您访问 AngularJS 中元素的 DOM 属性的方式。也可能有一些第三方指令专门用于做你想做的事，但我自己没有使用过。

【参考方案2】：

如果你想在某个点简单地截断文本（但实际上不改变字符串的值），你可以使用 limitTo 过滤器：

 fullString | limitTo: 115 

【讨论】：

是的，我曾想过这样做，但这只是切断了文本，它不会让我在点击时扩展文本。

【参考方案3】：

一个快速的谷歌显示了这个包，它似乎可以满足您对特定字符限制截断的需求。

https://github.com/lorenooliveira/ng-text-truncate

注意：我没有编写/使用该指令，因此无法正常工作。