Highlight searched result in Angularjs App
Today I am going to create a demo where searched text will be highlighed from the paragraph. Since when any user come across any huge listing or big paragraph then searching helps him/her alot to make his task easier. It improves the user experience when a user type related keyword and its get highlighted from the big paragraph.
So the required demo we don't need to do much task while working with angularjs. For this demo we need to interect with only two files one with html where we will show some text in paragraph with a search box and other where angularjs related task will be performed. Let's proceed step by step.
Have a look on html part(index.html)
In the above file we can see there is a ng-app directive, heading tag, a search box and a div where paragraph content will be shown.
Now lets have a look on code in app.js file.
In the above file we have a very basic angular app created with its controller named hightlightText and a data variable which is showing in html page. And within the controller we have a method which takes the value from the search box and matched it within the paragraph with below regular expression.
With these easy steps we can perform the task of highlighting the text from the paragraph.
Let me know your thoughts over the email firstname.lastname@example.org. I would love to hear them and If you like this article, share with your friends.
You can download complete code from here. Download Code