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

我试图添加一些突出显示的搜索结果使用角度。 我发现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>

{{person.FirstName | highlight}
{{person.LastName | highlight}

---

在这里查看JSFIDLE上的代码：

要做到这一点，您必须在使用ui中的突出显示过滤器之前完成几个步骤

您需要将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;
        }
    };
});

app.filter（'highlight'，函数（）{
返回函数（文本、搜索、区分大小写）{
if（text&（search | | angular.isNumber（search）））{
text=text.toString（）；
search=search.toString（）；
如果（区分大小写）{
返回text.split（search）.join（“”+search+“”）；
}否则{
返回text.replace（新的RegExp（搜索，'gi'），'$&'）；
}
}否则{
返回文本；
}
};
});

然后，您要做的是搜索结果部分：

<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建议的ng bind html是不安全的-html已从核心中删除，需要注入应用程序

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

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

---

您找到解决方案了吗？我也有同样的问题，我不想使用ng绑定html，因为它太可怕了

newregexp（search，'gi'）

在这段代码中是一个问题，因为搜索词不是有效的正则表达式（比如

+foo

）。非常适合我的需要。谢谢你，伙计。