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

I want to return html encoded string, but angular automatically sanitizes it. I tried using $sce as suggested, but it doesn't seem to work. Here's the plunkr: plunkr

thanks in advance.

回答1:

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

Just change your tpl.html to this :

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

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>

inject ngSanitize into your app.

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

And it works. Here is the plunker address.

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. : )

来源：https://stackoverflow.com/questions/26708085/angular-typeahead-filter-use-html-tags