Question

在我的表单正文中我有这个（示例）：

<div class="a" ng-repeat="q in question">{{q.Type}}</div>

结果将是：。

<div class="a ng-scope" ng-repeat="q in question">2</div>

问题包含用户问题，以及消息类型中的类型，如“系统”，“模块”和其他内容。

所以值是：

1：系统，

2：模块，

3：......

这是主题问题：

我想将Type更改为图像。意思是我想用{{q.Type}}替换带有标签的类型。所以我尝试使用过滤器，然后将代码更改为：

<div class="a" ng-repeat="q in question">{{q.Type | imgReplace}}</div>

然后我写了我的过滤器然后在过滤器中我有这样的东西：

if (input == 2) {
     return "<img src='img.jpg' />";

但结果是：

<div class="a ng-scope" ng-repeat="q in question"><img src="modules.jpg" /></div>

我能为这种情况做些什么。它不渲染html标记并呈现纯文本。

感谢。

Answer 1

可能是你在这之后：

ng-bind-html="trustedHtml"

在这个div：

<div class="a" ng-bind-html="trustedHtml" ng-repeat="q in question"></div>

在您的控制器/指令中，您可以添加：

$scope.html = "<img src='img.jpg' />";
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

我的意思是你需要在你的控制器中使用$sce告诉角色这个img来自可信来源，所以把它当作一个标记而不是一个字符串，这样你可以使用你的过滤器需要的。

Plunkr

Answer 2

最好使用ng-class

HTML：

<div class="a" ng-repeat="q in question" ng-class="marker(q.Type)">{{q.Type}}</div>

控制器：

$scope.marker = function(val) {

    switch (val) {
        case "1":
            return "class1";

        case "2":
            return "class2";

    }

}

并将background-image设置为class1或class2

在过滤器中用html标签替换文本

2 个答案:

Plunkr