Javascript 在过滤器中注入HTML-angularJS

我正在尝试构建一个角度应用程序，在其中显示国家列表。 在我的db中，列出的国家没有冠词（即“美国”而不是“美国”）

我希望如何在段落中显示它们，因此我创建了一个过滤器来更正此问题：

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

我使用以下代码显示它们：

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

布拉布拉布拉布拉布拉在{job.country | countryFilter}

我这里的问题是，我的span的字体颜色与段落的其余部分不同。我曾想过在过滤器中注入

（返回'the

'+input+

；），但HTML没有编译

我该怎么做

---

谢谢

如果要将HTML注入过滤器，您可以：

我相信你需要下载angular sanitize。（$消毒和消毒）

呜呜呜呜呜呜

StartupJobsAP.filter（'countryFilter'，函数（）{
返回函数（输入）{
开关（输入）
{
“联合王国”案：
返回'the'+输入+'；
“美国”案：
返回'the'+输入+'；
违约：
返回输入；
}
};
});

您想要不同的颜色，还是应该与段落的颜色相同？为什么不在{{job.country | countryFilter}}中使用

blablablablablablabla

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