Skip to content

Instantly share code, notes, and snippets.

@dcsg
Created April 24, 2012 10:31
Show Gist options
  • Save dcsg/2478654 to your computer and use it in GitHub Desktop.
Save dcsg/2478654 to your computer and use it in GitHub Desktop.
Truncate Filter for AngularJS v1.0
// add the filter to your application module
angular.module('yourAppName', ['filters']);
/**
* Truncate Filter
* @Param string
* @Param int, default = 10
* @Param string, default = "..."
* @return string
*/
angular.module('filters', []).
filter('truncate', function () {
return function (text, length, end) {
if (isNaN(length))
length = 10;
if (end === undefined)
end = "...";
if (text.length <= length || text.length - end.length <= length) {
return text;
}
else {
return String(text).substring(0, length-end.length) + end;
}
};
});
/**
* Example - see the jsfiddle: http://jsfiddle.net/tUyyx/
*
* var myText = "This is an example.";
*
* {{myText|truncate}}
* {{myText|truncate:5}}
* {{myText|truncate:25:" ->"}}
*
* Output
* "This is..."
* "Th..."
* "This is an e ->"
*
*/
@ultrawebsites
Copy link

It'd probably be worth adding in these two lines to the function too:

    if (text == null || text.length == 0)
        return null;

Cheers
Matt

@jfreal
Copy link

jfreal commented Jun 11, 2013

Thanks for this.

@turbohappy
Copy link

Excellent, thanks.

@scottywakefield
Copy link

Brilliant!

I also added a check for strings as I might be passing numeric as well. I just used angular.isString(text):

if (!angular.isString(text))
  return text;

@isRuslan
Copy link

You could probably use:

length = length || 10;
end = end || '...';

instead of:

if (isNaN(length))
  length = 10;

if (end === undefined)
  end = "...";

@mohsen1
Copy link

mohsen1 commented Jul 29, 2014

Use unicode character() for ellipsis instead of dot-dot-dot(...). This helps accessibility. VoiceOver will not read "dot dot dot" and handles it better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment