Hello To All Developer out there, Continuing our AngularJS Development Tutorials series, in this article we are going to learn about How To Limit characters Displayed in Text with AngularJS, So let’s start with an Example.
Article Contents
What are we going to learn in AngularJS?
we are going to limit the number of characters shown in a block of text using angular js. the In
Let’s assume that we have a large chunk of text in a model called ‘mobileDescription’, and we only want to show 100 characters at a time, with the option to expand our view to see the entire block of text. If we were to include the text without any limit, it would look like this:
{{mobileDescription}}
and Now. to display only 100 characters change the above code to
{{mobileDescription | limitTo: 100}}
- for ex: {{ “My String Is Too Long i think” | limitTo: 9 }}
- the output will be >>> “My String“
Simple isn’t it. But what if we want to display all the text of that model, For doing that we need to initialize a limit value in an outer element so that we can later modify it as shown below:
<div ng-init="limit = 100">
{{mobileDescription | limitTo: limit}}
</div>
If the length of the text is more than the limit (meaning we have cut off some text), we want to add an option to show more text so here we go:
<div ng-init="limit = 100; moreShown = false">
{{mobileDescription | limitTo: limit}}
<a ng-show="mobileDescription .length > limit"
href ng-click="limit=mobileDescription .length; moreShown = true"> Show More...
</a>
</div>
In the above text, we are also initializing a variable that will keep track whether or not our full block of text is displayed or not. If the length of the text is over the limit, ng-show will active and the href displaying a clickable “Show More…” will appear. On click, the limit will be set to the length of the text so that the entire block is displayed, and moreShown will correctly track the change to say that all the text is displayed.
Now, maybe we would like an option to shorten our text once again. We can use a similar sort of logic to add a “Show Less” href- just add the following code to the above and you’re done:
<a ng-show=”moreShown” href ng-click=”limit=100; moreShown = false”>Show Less </a>
The ng-show will trigger if we have the full amount of text displayed, and on click, the text limit will go back down to 100, with moreShown getting set back to false. easy right?
Finally, our overall code will be:
<div ng-init="limit = 100; moreShown = false">
{{mobileDescription | limitTo: limit}}{{mobileDescription .length > limit ? '...' : ''}}
<a ng-show="mobileDescription .length > limit"
href ng-click="limit=mobileDescription .length; moreShown = true">Show More
</a>
<a ng-show="moreShown" href ng-click="limit=100; moreShown = false">Show Less </a>
</div>
Thanks for reading the article and please subscribe to our newsletter for awesome MEAN Stack Developement articles and News and Do also check these articles: