How to display limited characted from an essay in Angularjs?

Question

I have a large paragraph for example, it may contain more than 300 characters or less than that.

What I need to do is, I need to take first 25 characters and add "...." after that 25th character and display that value above my image.

Once user clicks the image I will show the entire paragraph.

<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>

This may help you: http://stackoverflow.com/questions/18095727/limit-the-length-of-a-string-with-angularjs — Tim Biegeleisen, Dec 22 '16 at 07:06
You could also do the truncation from the server side before it even hits your UI. This would have the added benefit of not sending potentially unneeded information across the net. — Tim Biegeleisen, Dec 22 '16 at 07:07
I should not limit the user to enter story. But i need to filter some limited characters from the story and display on the story image. When user clicks on the story image. I will open a modal with story title, story image and story content. — kalai, Dec 22 '16 at 07:30

score 3 · Answer 1 · answered Dec 22 '16 at 07:36

You can take help of pipe/filter for it.

{{storyTitle[$index] | sliceFilter}}

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

And

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

and you are enter code heredone !

score 0 · Answer 2 · answered Dec 22 '16 at 07:59

You can use custom filter for that , which make your work a lot easier.

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 || ' …');
    };
});

Usage:

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

Options:

wordwise (boolean) - if true, cut only by words bounds,
max (integer) - max length of the text, cut to this number of chars,
tail (string, default: ' …') - add this string to the input string if the string was cut

Or you can try other solution

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

How to display limited characted from an essay in Angularjs?

2 Answers2