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 ItSolutionstuff.com. 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
- PHP AngularJS Add Remove Input Fields Dynamically Example
- How to Render HTML Value in Ng-repeat in AngularJS?
- 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 Does Not Exists Example
- How to Remove # from URL in AngularJS?
- AngularJS Image Upload with Preview Example
- How to Hide Div After Some Time in AngularJS?
- AngularJS Simple Datepicker Directive Example Tutorial
- AngularJS Sorting(using Orderby Filter) Table Data Example
- AngularJS - How to Capitalize the First Letter of Word Example
- How to Remove HTML Tags from String in AngularJS?