1

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;
});
Raymond the Developer
  • 1,576
  • 5
  • 26
  • 57
  • 2
    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
  • 2
    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

1 Answers1

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.

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