Angular Truncate Text / Show More (3+ Options)

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

Angular Text Truncate Module
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 a value of the variable in scope changes it is not reflected on the 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

Angular Truncate Filter
Angular Truncate Filter

Pros:
– Good options to not break words, specify the 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

Angular Ellipsis Module
Angular Ellipsis Module

Pros:
– A pretty good module as it uses max-height with window resize handlers to determine length of text.
– Has option for custom appended text

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

Github Demo

Conclusion:

So these are the Angular Truncate Text / Show More (3+ Options). If you like this tutorial script then share it with your community. If you have any suggestion Feel free to comment below.If you want to learn more about PHP, CodeIgniterAngularJSLaraveljQuery  Web Development then daily visit PHPCodify. Sharing is Caring.

Angular Truncate Text / Show More (3+ Options)

Read previous post:
Top 5 Autocomplete AngularJS Modules

Top 5 Autocomplete AngularJS Modules Here is what we think are the Top 5 Autocomplete AngularJS Modules. 1. AnguComplete by...

Close