Put max character length on angular expression and add ellipses

Issue

I have an angular expression which resolves to a block of text.

The block of text can be anywhere in size from 1 character to over 3,000. I want to add a limit to the amount of text which displays and hopefully add an ellipses to the end of the text, either with an image or somthing like <div>...</div>.

What would be the best way to approach this?

Is there an angular way to accomplish this, a filter of some sort perhaps?

Or would a directive be the better way to go?

<div text-length-limit>{{description}}</div>

Solution

You can do that with this:

{{description | limitTo: 5}}<span ng-show="description.length > 5">...</span>

limitTo limits the string to the desired length (5 here) and if the original string is upper that length display the ... after first 5 characters.

Answered By - michelem