How to show angular data model as HTML?

Question

I have a data-model that needs to be converted or show up as html. Right now it just shows up as text.

html

<div ng-repeat="item in ornamentFigures" class="ornament-item">
    <label for="ornament-{{item.id}}">{{item.svg}}</label>
    <input type="radio" id="ornament-{{item.id}}" name="ornament-radio" />
</div>

controller

$scope.ornamentFigures = ornamentFigures.ornamentFigures;

service

MyApp.service('ornamentFigures', function(){

    this.ornamentFigures = [
        {id:'03', name:'wit', svg:'<svg></svg>'},
        {id:'03', name:'wit', svg:'<svg></svg>'},
        {id:'03', name:'wit', svg:'<svg></svg>'},
    ];

    return this;
});

possible duplicate of [With ng-bind-html-unsafe removed, how do I inject HTML?](http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html) — , Sep 25 '15 at 20:38
possible duplicate of [How to make ng-bind-html compile angularjs code](http://stackoverflow.com/questions/19726179/how-to-make-ng-bind-html-compile-angularjs-code) — WorldSEnder, Sep 25 '15 at 20:39

Jess · Accepted Answer · 2015-09-25T20:50:46.367

2

Are you looking for ng-bind-html?

Replace:

<label for="ornament-{{item.id}}">{{item.svg}}</label>

With:

<label for="ornament-{{item.id}}" ng-bind-html="item.svg"></label>

Also include ngSanitize in your module and include "angular-sanitize.js" in your application as per the documentation.

Instead of binding the data as is, it will render as html. Keep in mind there are security implications to this. You might want to try a different way if you can.

edited Sep 25 '15 at 20:50

answered Sep 25 '15 at 20:40

Jess

23,901
21
124
145

I tried it for some reason it doesn't work with ng-repeat. It just shows up like this: – Raymond the Developer Sep 25 '15 at 20:47
Try simply `ng-bind="item.svg"`. That should work right away in the ng-repeat, but not render as html. I updated my answer to say that you need to include ngSanitize in your module in order to use ng-bind-html. – Jess Sep 25 '15 at 20:49
Ah oke, it works now by including the ngSanitize. I'll try another way when I find it thanks! – Raymond the Developer Sep 25 '15 at 20:59

How to show angular data model as HTML?

1 Answers1