如何创建输出HTML的angularjs过滤器?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (32)

在阅读AngularJS教程步骤9之后, 我创建了自己的AngularJS过滤器,它应该将布尔数据转换为html。

这是我的过滤代码:

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

这是我的HTML代码:

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

问题是borwser显示返回值的字面意思为:

<i class="icon-ok"></i>

而不是作为应该出现的图标(或呈现的html)。

我认为在这个过程中会发生一些问题。

是否可以关闭此特定过滤器的此功能?

另外我知道如何通过不从过滤器返回HTML输出来显示图标,而只是'OK'或'删除'文本,我可以用它替代:

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

但这不是我想要的。

提问于
用户回答回答于

应该使用该ng-bind-html指令(需要导入清理模块和js文件):

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

还需要导入CSS(Bootstrap I guess),以便能够在工作时看到图标。

用户回答回答于

我认为ng-class是这项工作所需要的指令,然后渲染为class属性更安全。

在这种情况下,只需添加对象字符串与id字符串作为类和值作为评估表达式

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

在附注中,应该只使用指令(内置和自定义)来操作html / dom,如果需要更复杂的html呈现器,则应该查看指令

扫码关注云+社区

领取腾讯云代金券