AngularJS指令与过滤器和颜色

AngularJS Directive with Filter and Color

本文关键字：颜色 过滤器 指令 AngularJS      更新时间：2023-09-26

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

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"将为红色。我想我需要使用这些指令，但我没有太多的经验，我想知道是否有人能建议我如何实现这个结果？谢谢

您需要使用过滤器来提取匹配的搜索词，并将其替换为具有突出显示样式的标记。

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

签出此演示并执行代码

相关文章：