带有过滤器和颜色的 AngularJS 指令答案

【问题标题】：AngularJS Directive with Filter and Color带有过滤器和颜色的 AngularJS 指令
【发布时间】：2015-11-07 08:59:53
【问题描述】：

我的模型中有一个简单对象列表（仅包含名称）：

var list = [{name: "Jane"}, {name: "Mary"}];

我在这里展示它们：

<table>
<tr data-ng-repeat="pers in list | filter: filter.label >
<td >
{{pers.name }}
</td>
</tr>
</table>

没关系。

我还有一个过滤器：

Name: <input type="text" data-ng-model="filter.name" />

我需要做的是用某种颜色标记过滤后的匹配：例如，如果您键入“A”符号，它应该显示搜索结果：Mary, Jane 其中子字符串“A”将为红色。我想我需要使用这些指令，但我对它们没有太多经验，我想知道是否有人可以建议我怎样才能达到这个结果？谢谢。

【问题讨论】：

这不是一项简单的任务，因为它需要将匹配项包装在<span> 标签中。是的，它将涉及使用指令、正则表达式和 dom 操作。建议您寻找现有的荧光笔指令。你的问题范围太广了

标签： javascript angularjs angularjs-directive web-frontend

【解决方案1】：

您需要使用过滤器来提取匹配的搜索词并将它们替换为带有突出显示样式的标签。

<table>
<tr data-ng-repeat="pers in list | filter: filter.label" ng-bind-html="pers.name | highlight:filter.label">
<td >
{{pers.name }}
</td>
</tr>
</table>

您的过滤器将如下所示：

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

查看demo和code

【讨论】：