如何在Angularjs中显示文章中的有限字符？

Posted 2023-02-27

【中文标题】如何在Angularjs中显示文章中的有限字符？

【英文标题】：How to display limited characted from an essay in Angularjs?

【发布时间】：2017-05-07 17:52:26

【问题描述】：

例如，我有一个大段落，它可能包含超过 300 个字符或更少。

我需要做的是，我需要获取前 25 个字符并在第 25 个字符之后添加“....”并将该值显示在我的图像上方。

一旦用户点击图片，我将显示整个段落。

<section class="showContents">
        <div class="image" ng-repeat="imageSrc in stories track by $index">
        <img class="images" ng-src="stories[$index]" style="cursor: pointer;" ng-click="showStories($index)">
            <button class="styleTheSelection dropdown-toggle" data-toggle="dropdown"><b>storyTitle[$index]</b> <img src="css/images/more_p.png" class="styleTheBtn">
            </button>
        </div>     
    </section>

【问题讨论】：

这可能对你有帮助：***.com/questions/18095727/…

你也可以在它到达你的 UI 之前从服务器端进行截断。这将具有额外的好处，即不会通过网络发送可能不需要的信息。

我不应该限制用户进入故事。但我需要从故事中过滤一些有限的角色并显示在故事图像上。当用户点击故事图像时。我将打开一个包含故事标题、故事图像和故事内容的模式。

【参考方案1】：

你可以借助管道/过滤器。

storyTitle[$index] | sliceFilter

In sliceFilter
 if (value.split('').length > 25) 
    value = value.substring(0, 25);
 
 return value;

还有

<button ng-if="storyTitle[$index].length > 25">...</button>

你是enter code heredone！

【参考方案2】：

您可以为此使用自定义过滤器，这让您的工作更轻松。

angular.module('ng').filter('cut', function () 
    return function (value, wordwise, max, tail) 
        if (!value) return '';

        max = parseInt(max, 10);
        if (!max) return value;
        if (value.length <= max) return value;

        value = value.substr(0, max);
        if (wordwise) 
            var lastspace = value.lastIndexOf(' ');
            if (lastspace != -1) 
              //Also remove . and , so its gives a cleaner result.
              if (value.charAt(lastspace-1) == '.' || value.charAt(lastspace-1) == ',') 
                lastspace = lastspace - 1;
              
              value = value.substr(0, lastspace);
            
        

        return value + (tail || ' …');
    ;
);

用法：

some_text | cut:true:100:' ...'

选项：

wordwise (boolean) - 如果为真，则仅按单词边界切割， max (integer) - 文本的最大长度，剪切到这个字符数， tail (string, default: '...') - 将此字符串添加到输入字符串，如果 字符串被剪断了

或者您可以尝试其他解决方案

http://ngmodules.org/modules/angularjs-truncate