角预输入过滤器：使用HTML标签 [英] angular typeahead filter: use html tags

问题描述

我使用的是具有角预输入过滤器，以一个额外的项目追加到像这样的预输入建议列表：

I'm using a filter with angular typeahead to append an extra item onto the typeahead suggestion list like so:

app.filter('finalAppend', function($sce){
  return function(array, value){ 
    array.push({
    name: $sce.trustAsHtml('Look for <b>' + value + '</b> in other shops'),
    type: 'good'
    }); 
    return array;
  }
});

我要返回HTML EN codeD字符串，但角度自动进行消毒了。我试着用$ SCE的建议，但它似乎并没有工作。这里的plunkr： plunkr

先谢谢了。

推荐答案

这似乎在UI自举0.7.0，有typehead亮点滤波器和自己finalAppend过滤器之间的冲突。

It seems in ui-bootstrap 0.7.0, there is a conflict between typehead highlight filter and your own finalAppend filter.

只是你tpl.html改成这样：

Just change your tpl.html to this :

<div ng-if="match.model.type!=null">
    <span  ng-bind-html="match.label"></span>
</div>

和负载角的sanitize至prevent安全的错误由角被自动抛出。

And load angular sanitize to prevent secure error automatically been thrown by angular.

<script src="http://code.angularjs.org/1.3.1/angular-sanitize.js"></script>

注入ngSanitize到您的应用程序。

inject ngSanitize into your app.

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

和它的作品。 这里是plunker地址。

然而，如果你仍然想使用预输入内部的高亮显示过滤器，可以与UI引导改变你这个（已更改它在演示）：

However, if you still want to use the typeahead inner highlight filter, you can change you ui-bootstrap to this(Already change it in the demo):

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>

希望这能正常工作。好好享受。 ：）

Hope this can work. Enjoy it. : )

这篇关于角预输入过滤器：使用HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！