javascript - 使用 angular.js 和 ui.utils 突出显示搜索结果

Question

我正在尝试使用 Angular 添加一些搜索结果突出显示。我发现 UI.Utils 中的突出显示功能给出了我想要的结果。但是这些例子都使用了 ng-bind-html-unsafe。有没有办法改用这种模板方法？

<div ng-app>
    <div ng-controller="searchController">
        <input ng-model="query"/>

        <div class="t">
            <div class="tr" ng-repeat="person in result">
                <div class="td">{{person.FirstName | highlight}}</div>
                <div class="td">{{person.LastName | highlight}}</div>
            </div>
        </div>    
    </div>
</div>

在此处查看 jsfiddle 上的代码:http://jsfiddle.net/vs7Dm/4/

Answer 1

为此，您必须在使用 ui-angular 的高亮过滤器之前完成几个步骤

您需要将 ngSanitize 作为依赖项。见下文；

var app = angular.module('app',['ngSanitize']);

将此添加到您的 HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"/>

像这样将高亮过滤器复制到您的应用

    app.filter('highlight', function () {
    return function (text, search, caseSensitive) {
        if (text && (search || angular.isNumber(search))) {
            text = text.toString();
            search = search.toString();
            if (caseSensitive) {
                return text.split(search).join('<span class="ui-match">' + search + '</span>');
            } else {
                return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
            }
        } else {
            return text;
        }
    };
});

然后您要做的是针对可搜索结果部分:

<input type="text" placeholder="Search..." ng-model="searchText" />
<div ng-repeat="address in addresses | filter:searchText">
   <p ng-bind-html="address.title | highlight:searchText"></p>
   <p ng-bind-html="address.address_1 | highlight:searchText"></p>
   <p ng-bind-html="address.address_2 | highlight:searchText"></p>
   <p ng-bind-html="address.address_3 | highlight:searchText"></p>
</div>

请注意，在 ng-repeat 中使用 ng-bind-html 而不是 ui-angular 建议的 ng-bind-html-unsafe。 -html-unsafe 已从核心中删除，需要注入(inject)到您的应用中。

这是我使用 AngularJS v1.3.0 运行它所需的一切。

如果您对此方法有任何疑问，请告诉我。

Demo here