在过滤器中注入 HTML - angularJS答案

【问题标题】：inject HTML in filters - angularJS在过滤器中注入 HTML - angularJS
【发布时间】：2014-03-20 16:21:40
【问题描述】：

我正在尝试构建一个显示国家列表的 Angular 应用程序。在我的数据库中，列出的国家/地区没有文章（即“美国”而不是“美国”）

我想在一个段落中显示它们，所以我创建了一个过滤器来纠正这个问题：

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>

我的问题是我的 span 的字体颜色与段落的其余部分不同。我曾想过在过滤器中注入（返回''+输入+;）但HTML没有编译。

我该怎么做？

谢谢

【问题讨论】：

你想要不同的颜色还是应该和段落的颜色一样？为什么不直接使用bla bla bla bla in {{job.country | countryFilter}}

标签： javascript html css angularjs filter

【解决方案1】：

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

我相信您需要下载 angular-sanitize。（http://docs.angularjs.org/api/ngSanitize/service/$sanitize 和 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;
    }
  };
});

【讨论】：