1

I'm developing an angularJS application and when I set a String value with "<br>" tag, it is not rendering as HTML tag and it prints as "AA<br>BB" on the page. So I change it to "&lt;br&gt;" that is also not rendered and print as "AA&lt;br&gt;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?

Ashesh
  • 3,499
  • 1
  • 27
  • 44
Nomesh DeSilva
  • 1,649
  • 4
  • 25
  • 43
  • Check - http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs – Indy May 10 '15 at 12:36

2 Answers2

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>
dotnetom
  • 24,551
  • 9
  • 51
  • 54
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;
});
jad-panda
  • 2,509
  • 16
  • 22
  • great, this is working...small change was needed to avoid the front
    . just like " {{item.csf}}
    ".     – Nomesh DeSilva May 10 '15 at 16:40
  • 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?     – twknab Aug 31 '17 at 02:29