1

I have a list of search results, each with a summary and a list of terms to highlight in that summary (but each summary has its own highlight terms and shouldn't be affected by the others).

I am quite new to angularjs and having trouble getting this to work. This is my current html without the highlighting.

<ul ng-if="searchResults.length > 0">
    <li ng-repeat="searchResult in searchResults">
        <h2>{{ searchResult.Title }} </h2>       
        <p>{{ searchResult.Summary }}</p>
    </li>
</ul>

This is an example of what one of the searchResult object's data looks like:

searchResult:  { 
   "HighlightTerms": [ "text", "summary" ],
   "Summary": "this is a text summary"
   "Title": "my title"
} 

So ideally the first result would display 'text' and 'summary' with a yellow highlight.

Any suggestions on the best way to do this? I have tried using ng-bind-html but couldnt get it to work

Here is an example of how it should look if there was one HighlightTerm - 'sensor'.

example

4
  • Am I corret : you need to have first li element in ul highlighted only?
    – Eugene P.
    Commented Feb 26, 2014 at 11:34
  • Do you mean "HighlightTerms": [ "text", "summary" ], header, so change to the back color right? Commented Feb 26, 2014 at 11:38
  • Thanks Eugene, Each li represents a searchResult and will have the specific HighlightTerms for that searchResult highlighted. So they can all have different highlights.
    – nd2010
    Commented Feb 26, 2014 at 11:38
  • Yes Ramesh I want to change the backcolor of 'text' and 'summary' or whatever is in the HighlightTerms list.
    – nd2010
    Commented Feb 26, 2014 at 11:40

2 Answers 2

0

You can check angular ui-utils highlight feature

http://angular-ui.github.io/ui-utils/#/highlight

<label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label>
<input placeholder="Enter some text to highlight" value="you" ng-model="highlightText">
<p ng-bind-html-unsafe="'Hello there, how are you today? I\'m fine thank you.' | highlight:highlightText:caseSensitive"></p>

<style>
.ui-match { background: yellow; }
</style>
1
  • Thanks, I have already looked at this and as it just deals with one highlight not an array of them I wasnt able to get it to work.
    – nd2010
    Commented Feb 26, 2014 at 12:39
0

Sorry for the late answer but this could help other people.

You can create you own directive based on ui-utils:

/**
 * Highlight words
 */
angular.module('MODULE_NAME')
    .filter('highlightWords', function () {
      return function (text, search) {
        if (text && (search || angular.isNumber(search))) {
          text = text.toString();
          search = search.toString();

          angular.forEach(search.split(/\s+/), function(word) {
            // reject some words from the filtering
            if (['span', 'class', 'ui-match'].indexOf(word) < 0) {

                var pattern = new RegExp("\\b" + word + "\\b", "gi");
                text = text.replace(pattern, '<span class="ui-match">$&</span>');
            }
          });
        }
        return text;
      };
});

Where MODULE_NAME is the name of your module.

Usage Example:

<p ng-bind-html="mymodel.text | highlightWords:searchTerms"></p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.