Format filtered results in AngularJS

I’ve an input box which is used to filter out the results among the overall results displayed. I’ve a filter ‘startWith’ for that. Now, I need to highlight the search text among the search results displayed in angularJS.

For e.g., when I type ‘o’ in the search box, it should highlight ‘O’ of the Orange displayed.

Could you please help me achieve this?

Here’s my code:


Not sure. I don’t know much about dependency injection or how to do it.
Perhaps you could explain how it is supposed to work?

Hey. You can use the ng-bind-html directive instead of the interpolation in your ng-repeat and then a filter for your ng-model that will wrap the letters of the words in a span as they are typed:


<p ng-repeat="obj in myData | filter:search:startWith" ng-bind-html=" |">


app.filter('highlightMatch', function($sce) {
    return function(words, search) {
      return $sce.trustAsHtml(search ? words.replace(new RegExp(`(${search})`, 'i'), '<span class="match">$1</span>') : words);

Then you can style the “match” class as you wish:

.match {
  background-color:rgba(0, 128, 128, .5);

See an example here.