CODEWITHSUNDEEP
htmlangularjsfilter
Lukas Safari
Lukas Safari

Reputation: 1968

Replace text with html tag in filter

in my form body I have this (example):

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

the result would be :.

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

question contains the user questions , and the Type in the type of the message like "System" , "Modules", and other things .

so the values are :

1: System,

2: Modules,

3: ...

here is the topic question :

I want to change the Type to image . the meaning is I want to replace the Type in {{q.Type}} with tag . so I try to use filters and I changed my code to this :

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

and the I wrote my filter and then in filter I have something like this :

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

but the result is :

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

what can I do for this situation . it dont render the html tag and render a plain text .

thanks.

Upvotes: 0

Views: 2171

Answers (2)

Mohamad Shiralizadeh
Mohamad Shiralizadeh

Reputation: 8765

it is better to use ng-class

HTML:

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

Controller:

$scope.marker = function(val) {

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

        case "2":
            return "class2";

    }

}

and set background-image to class1 or class2

Upvotes: 2

Jai
Jai

Reputation: 74738

May be you are after this:

ng-bind-html="trustedHtml"

at this div:

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

and in your controller/directive you can add this:

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

What i meant here you need to use $sce in your controller to tell angular that this img is coming from trusted source so treat it as a markup not as a string and with this you can use your filter as you needed.

Plunkr

Upvotes: 2

Related Questions