Question

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

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" />

我需要做的是用一些颜色标记过滤后的匹配：例如，如果您输入＆＃34; A＆＃34;它应该显示搜索结果的符号：Mary，Jane where substring＆＃34; A＆＃34;将是红色的。我想我需要使用这些指令，但我对它们没有多少经验，我想知道是否有人可以建议我如何才能达到这个结果？感谢。

Answer 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

带滤镜和颜色的AngularJS指令

1 个答案: