HTML tag is not rendering on page with AngularJS

Question

I'm developing an angularJS application and when I set a String value with " " tag, it is not rendering as HTML tag and it prints as "AA BB" on the page. So I change it to " " that is also not rendered and print as "AA BB".

for(x=0; x < data.length ; x++ ){
    csf = csf + '<br> '+data[x].csf;
}

$scope.targetValue = csf;

and I use this value in HTML as :

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF:{{targetValue}} </small>
</div>

what is the reason for not rendering this text and print the tag in page?

Check - stackoverflow.com/questions/9381926/…

Indy
– Indy

2015-05-10 12:36:24 +00:00
Commented May 10, 2015 at 12:36 — Indy
– Indy, Commented May 10, 2015 at 12:36

krivtom · Accepted Answer · 2015-05-10 12:36:42Z

2

You need to use ng-bind-html to render HTML:

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF: <span ng-bind-html="{{targetValue}}"></span></small>
</div>

answered May 10, 2015 at 12:36

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nomesh DeSilva Over a year ago

Thanks for the alternative, but I tried this does not show the value, blank instead!

jad-panda · Accepted Answer · 2015-05-10 13:26:35Z

1

You can use ng-bind-html for this but its not a good idea to generate HTML inside controller in angular and assign it a scope value, if you are doing so then you are not using true power of angular.

In this case, instead, you can use ng-repeat. see the below code

http://jsfiddle.net/jigardafda/5henysda/1/

HTML

<div ng-app="app">
    <div ng-controller="tcrtl">
        <div class="fz-display-table-cell fz-col-3 fz-main-result">
            CSF:
            <div ng-repeat="item in data"> 
                <br/> {{item.csf}} 
            </div>
        </div>
    </div>
</div>

JS

var app = angular.module('app', []);

app.controller('tcrtl', function($scope){

    var data = [
        {
            csf: 'one'
        },
        {
            csf: 'two'
        }
    ]

    $scope.data = data;
});

edited May 10, 2015 at 13:26

answered May 10, 2015 at 13:19

jad-panda

2,54717 silver badges22 bronze badges

2 Comments

Nomesh DeSilva Over a year ago

great, this is working...small change was needed to avoid the front . just like " {{item.csf}} ".

twk Over a year ago

I attempted this solution, however this does not remedy a situation where tags are contained in data returned from the server, where the item is not an iterable object...what's the best method to convert already created tags into justified HTML markup?

Collectives™ on Stack Overflow

HTML <br> tag is not rendering on page with AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related