Angular Truncate Text / Show More (3+ Options)

Here are some options for showing/hiding your long text in AngularJs using directives/filters (and/some in modules). I’ve included screenshots and pros/cons for each so you can determine quickly which ones you might use for your next project.

1. Angular Text Truncate Module

This one fulfills the requirement of having show/hide for more text. Pretty well coded.
Pros:
– Has option to show/hide more text.
– Option for truncate character length or number of words.
– Custom appended text (ie – read more…).

Cons:
– When value of variable in scope changes its not reflected on page. (Update: I managed to tweak the code to get it working).
https://github.com/lorenooliveira/ng-text-truncate/issues/3

Github Demo 1 Demo 2

2. Angular Truncate Filter

Pros:
– Good options to not break words, specify number of characters or words.

Cons:
– No option to show/hide more text.
– No option for custom appended text (ie – read more…).

Github Demo

3. Angular Ellipsis Module

Pros:
– Pretty good module as it uses max-height with window resize handlers to determine length of text.
– Has option for custom appended text (ie – read more…).

Cons:
– No option to show/hide more text.
– though and the window resize events add unnecessary overhead in my opinion.

Github Demo