AngularJS - How to Limit String Length using Filter?
Some case we have enough space to display content, for example you have articale blog and you want to display saveral articale on homepage with limited content like this way :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate....
You can do it easily if you are work on any framework or something, but if you want to do on angular then you need to create your own filter for this. you can set limit of characters using following filter:
Create Filter:
var app = angular.module('myApp', []);
app.filter('limitChar', function () {
return function (content, length, tail) {
if (isNaN(length))
length = 50;
if (tail === undefined)
tail = "...";
if (content.length <= length || content.length - tail.length <= length) {
return content;
}
else {
return String(content).substring(0, length-tail.length) + tail;
}
};
});
Use Filter:
If you don't want to set limit then it will take 50 auto.
{{ randomText | limitChar }}
Bellow example you can see, we can set limit specific as we want.
{{ randomText | limitChar:10 }}
Bellow example you can see, we can set limit specific as well as we can specify last char as we want.
{{ randomText | limitChar:10:"...!!!" }}
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- AngularJS - Add Remove Input Fields Dynamically with PHP MySQLi
- AngularJS - How to render HTML value in ng-repeat ?
- AngularJS - scroll to a specific element using anchorscroll
- AngularJS - convert comma separated string to array example
- AngularJS - How to create read more/less toggle using Directive?
- AngularJS - Display Default image if original image does not exists with example
- How to remove # from URL in AngularJS?
- AngularJS - simple image upload with preview example in PHP
- How to hide div after some time using AngularJS?
- Angularjs Simple Datepicker directive example code with Demo
- AngularJS - sorting(using orderby filter) table data example with demo
- AngularJS - How to Capitalize the First Letter of Word Example
- How to Remove HTML Tags from String in AngularJS?