Limit the length of a string with AngularJS

P

27

234

I have the following:

<div>{{modal.title}}</div>

Is there a way that I could limit the length of the string to say 20 characters?

And an even better question would be is there a way that I could change the string to be truncated and show ... at the end if it's more than 20 characters?

Photogenic answered 7/8, 2013 at 6:0 Comment(1)

jsfiddle.net/tUyyx – Nottinghamshire 7/8, 2013 at 6:2

S

349

Edit The latest version of AngularJSoffers limitTo filter.

You need a custom filter like this:

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.

Another solution: http://ngmodules.org/modules/angularjs-truncate (by @Ehvince)

Sounder answered 7/8, 2013 at 6:24 Comment(10)

There's an equivalent at angular-modules: ngmodules.org/modules/angularjs-truncate – Goodnatured 7/8, 2013 at 15:16

angularjs-truncate isn't solution, but your IS solution. Thank you! Make it as module! – Noleta 29/4, 2014 at 19:48

@epokk There's a way to allow user to, after click on the three dots, show the complete uncut text? Like a "show more"? Thanks! – Weiler 7/12, 2014 at 19:23

this works fine when we use it like this {{post.post_content | cut:true:100:' ...'}} But fails when i use like this <span ng-bind-html="trustedHtml(post.post_content| cut:true:100:' ...')"></span> Because i am forced to use it with trusted html in my case – Giantess 19/4, 2015 at 13:22

The wordwise limit is a nice feature that doesnt seem to exist in the default "limitTo" – Len 28/7, 2015 at 20:25

Is there a simple way filterTo to make the string truncated at the first space after the position limit ? So it doesn't split at the middle of a word. – Nicholas 15/12, 2015 at 9:7

I just wanted to improve this answer a bit, if the last word of the wrapping has a comma or dot at the end, it ends up with something like .... or ,... which I hate, so It can be improved by adding the following right after the lastspace != -1 if statement if (value.charAt(lastspace-1) == '.' || value.charAt(lastspace-1) == ',') { lastspace = lastspace - 1; } – Stet 11/4, 2016 at 13:2

@EpokK: Thanks. how about adding read more link if cut happens – Jud 17/6, 2016 at 9:17

@ThalesP Of course this is an old question but to do something like that (click and show the text) I just put a ng-click="ctrl.cutting=!ctrl.cutting; ctrl.cut2 = ctrl.cutting ? 50 : 5000;" in my html element that contains the text and 2 variables vm.cutting = true; vm.cut2 = 50; on my controller. If I click on my text the limit will be 5000 instead of 50. – Infinite 27/9, 2019 at 14:10

@Infinite Hehehe, really old :) Tkx – Weiler 15/7, 2020 at 23:1

R

510

Here is the simple one line fix without css.

{{ myString | limitTo: 20 }}{{myString.length > 20 ? '...' : ''}}

Roundhead answered 17/9, 2014 at 13:49 Comment(11)

Simple and elegant. Instead of '...' you can also use the HTML entity for ellipsis: '…' – Executor 21/1, 2015 at 17:54

probably the most painless solution. Still keep in mind that filters are relatively heavy and this might have performance issues on huge ng-repeat list! :) – Monarchy 28/2, 2016 at 12:47

awesome! is there a way to cut after a number of lines, rather than after a number of characters? – Soil 28/6, 2016 at 9:22

@Soil You need to try that in css or write a directive to achieve that. – Roundhead 28/6, 2016 at 11:49

This is the best answer. The performance hit should be negligible with a reasonable number of ng-repeat. If you're bringing back hundred's of ng-repeat with content that needs to be truncated then might need to go back to drawing board. Nice answer, @Roundhead – Cooler 21/9, 2016 at 18:12

Please what if I want to apply a limit to the total length of two strings? – Pittsburgh 5/12, 2016 at 9:25

@Lig Please elaborate. Any example of what you require will be helpful. – Roundhead 5/12, 2016 at 13:25

@Roundhead lets say that I have $scope.string1 and $scope.string2. In the HTML I display {{string1}} {{string2}}. I want that the total of charatecters of the two string have a limit. How can I do that? – Pittsburgh 5/12, 2016 at 14:29

@Lig have to write custom filter for this. If you wish ask a separate question and post the link here. I ll answer that. – Roundhead 6/12, 2016 at 5:36

But this solution doesn't have support for word wise cut – Tillotson 6/12, 2016 at 11:56

How can i do this with ng-bind-html ? – Pepin 6/12, 2017 at 13:33

S

349

Edit The latest version of AngularJSoffers limitTo filter.

You need a custom filter like this:

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.