This is a simple, but fully functional, directive for truncating text in angularjs apps. This directive not only truncates your text, but also permits toggling the hidden part of the truncated text.
If you are using ng-text-truncate in a project that already uses Twitter Boostrap, then the toggling elements (i.e. textual links with the texts "More" and "Less") shall inherit Bootstrap's styles for textual links. If you are not using Twitter Boostrap or if you want to customize some aspect of the toggling elements, then you can write your own CSS for the class ngTruncateToggleText.
DEMO 1 (Most of the use cases)
<script src="https://github.com/lorenooliveira/ng-text-truncate/raw/master/angular.min.js"></script>
...
<script src="https://github.com/lorenooliveira/ng-text-truncate/raw/master/ng-text-truncate.js"></script>
As usual, include this file after the inclusion of the angular.min.js file.
angular.module( "TestApp", [ "ngTextTruncate" ] );
$scope.longText = "Lorem ipsum dolor sit amet, and a possibly long remaining text.";
Use the cs-truncate attribute to pass the variable holding your text. In the cs-truncate-threshould attribute you should indicate the maximum number of chars to be displayed before truncation. That is, any string bigger than cs-truncate-threshould will be truncated.
<p ng-text-truncate="longText"
ng-tt-chars-threshold="40"></p>
Now open your HTML and everything should be working as intended.
By using this directive you can:
Take a look at our live demos. There we have clear examples about using each of our features.
DEMO 1 (Most of the use cases)
Get in touch if you have ideas for improvements. Bug reports and pull requests are welcome.