javascript - 使用 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>