使用angular.js动态标记搜索字符串

Question

如何在我的html中动态标记我的搜索模式？
例:

我正在使用angular,我的html看起来像这样:

<div>
   <input type="text" ng-model="viewmodel.searchString"/>
   <!--Moving over all phrases-->
   <div ng-repeat="phrase in viewmodel.Phrases">
        {{phrase.title}}            
   </div>
</div>

我希望字符串匹配模式将在搜索字符串中的每个更改上标记.

你能帮助我吗？

Answer 1

Angular UI是一个很好的选择.您也可以使用以下过滤器执行此操作:http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/preview

本质是由@Hylianpuffball评论,为匹配动态创建样式'span'标签.

.filter('highlight', function($sce) {
  return function(text, phrase) {
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
      '<span class="highlighted">$1</span>')

    return $sce.trustAsHtml(text)
  }
})

并使用它像:

<li ng-repeat="item in data | filter:search.title"
    ng-bind-html="item.title | highlight:search.title">
</li>