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

Question

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

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

结果将是：.

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

question 包含用户的问题，以及消息类型中的 Type，如“System”、“Modules”等。

所以值是：

1：系统，

2：模块，

3: ...

这里是主题问题：

我想将 Type 更改为 image 。意思是我想用 tag 替换 {{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-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

Answer 2

也许你在这之后：

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 来告诉 Angular 这个 img 来自受信任的来源，所以把它当作一个标记而不是一个字符串，这样你就可以根据需要使用你的过滤器。

Plunkr