使用Angular过滤器突出显示搜索结果并隐藏不匹配的文本？

Question

I found this example for highlighting a search result using Angular filter, the thing is that when you search for example 'suit' it highlight the word suit but all the non-matching text is still there.

http://demo.codeforgeek.com/highlight-angular/

How I can hide all text except the highlighted text and two or three word before and after this one?

Answer 1

Just change the <style> part with below code:

<style>
  .highlighted { color:#000; background: yellow }
  div.container ul div { color:#fff }
</style>

this should do the trick.