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'.