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

例如，我有一个很大的段落，它可能包含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>

{{storyTitle[$index]}

您可以借助管道/过滤器来实现

{{storyTitle[$index] | sliceFilter}}

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

及

。。。

---

您在这里输入代码完成了

你可以借助管道/过滤器

{{storyTitle[$index] | sliceFilter}}

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

及

。。。

---

您在这里输入代码完成了

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

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:' ...'}}

• 逐字（布尔）-如果为true，则仅按单词边界进行剪切
• max（integer）-文本的最大长度，剪切到此字符数
• 尾部（字符串，默认值：“…”）-如果需要，将此字符串添加到输入字符串中 绳子断了

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

---

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

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:' ...'}}

• 逐字（布尔）-如果为true，则仅按单词边界进行剪切
• max（integer）-文本的最大长度，剪切到此字符数
• 尾部（字符串，默认值：“…”）-如果需要，将此字符串添加到输入字符串中 绳子断了

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

---

这可能会对您有所帮助：您还可以在服务器端甚至在它进入您的UI之前进行截断。这样做的另一个好处是不会在网上发送可能不需要的信息。我不应该限制用户输入故事。但是我需要从故事中过滤一些有限的角色，并显示在故事图像上。当用户点击故事图片时。我将打开一个包含故事标题、故事图像和故事内容的模式。这可能会对您有所帮助：您还可以在服务器端截短它，甚至在它到达您的UI之前。这样做的另一个好处是不会在网上发送可能不需要的信息。我不应该限制用户输入故事。但是我需要从故事中过滤一些有限的角色，并显示在故事图像上。当用户点击故事图片时。我将打开一个包含故事标题、故事图像和故事内容的模式。