在过滤器中注入HTML-angularJS

Question

I am trying to build an angular app where i display a list of countries. In my db the countries are listed without articles (ie "US" instead of "the US")

How ever I'd like to display them in a paragraph so I created a filter to correct this:

startupjobsApp.filter('countryFilter', function() {
  return function(input) {
    switch(input)
    {
    case 'United Kingdom':
        return 'the ' + input;
    case 'United States':
        return 'the ' + input;
    default:
        return input;
    }
  };
});

And I display them using this code:

<span class="content">
         <p>bla bla bla bla in <span>{{job.country | countryFilter}}</span></p>
</span>

My problem here is that my span has a different font color than the rest of the paragraph. I have thought of injecting the <span> in the filter (return 'the <span> ' + input + </span> ;) but the HTML is not compiled.

How can I do this?

Thanks

Answer 1

If you want to inject HTML into a filter, you can:

I believe you will need to download angular-sanitize. ( http://docs.angularjs.org/api/ngSanitize/service/ $sanitize and http://code.angularjs.org/1.2.9/ )

<span class="content">
     <p>bla bla bla bla in <span ng-bind-html="job.country | countryFilter"></span></p>
</span>

startupjobsApp.filter('countryFilter', function() {
  return function(input) {
    switch(input)
    {
    case 'United Kingdom':
        return '<span>the ' + input +'</span>';
    case 'United States':
        return '<span>the ' + input  +'</span>';
    default:
        return input;
    }
  };
});