标记搜索字符串动态使用angular.js [英] mark search string dynamically using angular.js

问题描述

如何动态记住我的搜索模式在我的html？结果
例如：

How can I mark my search pattern dynamically in my html?
Example:

我使用的角度和我的HTML看起来像这样：

I'm using angular and my html looks like this:

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

我要的字符串相匹配的模式将在搜索字符串中的每一个变化大关。

I want the string matching pattern will be mark on every change in search string.

你能帮助我吗？

推荐答案

角UI是一个不错的选择。你也可以像过滤器做到这一点：<一href=\"http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/$p$pview\">http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/$p$pview

Angular UI is a great choice. You can also do it with filter like: http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/preview

的实质是由@Hylianpuffball评论，动态地创建风格'跨越'的标签匹配。

The essence is as commented by @Hylianpuffball, dynamically create styled 'span' tags for the matches.

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

这篇关于标记搜索字符串动态使用angular.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！