Shortening a String in Angular JS

Question

I have multiple titles that are longer than 40 characters. I would like to shorten it to 40 characters and add ... if there are more characters.

I want to do something like this but in angular js:

if ( title.length > 40){
title = title.substring(0, 40) + '...'
}

I am just looking for a way to do something similar in angular js. — user2456259
– user2456259, Commented Aug 6, 2014 at 22:58
You don't say and I can't figure out exactly why you'd want to do this unless it is to prevent overflow. Have you checked out the css property text-overflow: ellipsis? — Jason Goemaat
– Jason Goemaat, Commented Aug 7, 2014 at 0:39

StuR · Accepted Answer · 2014-08-06 23:29:03Z

2

I'd suggest create an angular filter, something like this:

angular.module("myApp", [])
.filter('ellipsis', function () {
    return function (input, chars) {
        return input.length > chars ? input.substring(0, chars) + '...' : input;
    };
});

function myCtrl($scope) {
    $scope.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum urna vitae nisl volutpat mattis.";
}

Usage example:

<div ng-controller="myCtrl">
    {{ text | ellipsis:40 }}
</div>

http://jsfiddle.net/rd13/KLDEZ/4/

edited Aug 6, 2014 at 23:29

answered Aug 6, 2014 at 23:16

StuR

12.3k9 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2014-08-06 23:15:49Z

0

If you are looking for something a little more 'angular-y' you could write a filter that would allow you to use this in templates:

{{title | shorten:25}}!

Here's a super-basic fiddle with an example. You might want to add some error-catching, testing, etc:

answered Aug 6, 2014 at 23:15

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Collectives™ on Stack Overflow

Shortening a String in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related