17

I'm using AngularJS with a third party service that generates html responses. I want to use ng-repeat to render the HTML responses as a list, however Angular renders it as text.

Is it possible to use ng-repeat to render HTML property?

I've created this jsFiddle to demonstrate my issue. http://jsfiddle.net/DrtNc/1/

Shlomi Schwartz
  • 8,693
  • 29
  • 109
  • 186
  • 1
    For those of you viewing this question now, check out the top comment on the docs for [ngBindHtml](http://docs.angularjs.org/api/ng.directive:ngBindHtml). That worked for me while these answers did not. – Gaʀʀʏ Nov 20 '13 at 22:37

3 Answers3

20

I think using ng-bind-html-unsafe will get you what you need.

<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div>

Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/

Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

Noah Freitas
  • 17,240
  • 10
  • 50
  • 67
17

The way I achieved this is by ng-bind-html inside the ng-repeat;

<div ng-repeat="comment in comments">
  <div ng-bind-html="comment.content"></div>
</div>

Hope this helps someone!

Matt Saunders
  • 4,073
  • 7
  • 33
  • 47
  • 1
    Don't forget to use $sce for the html element you want to inject. See: http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html – Quad Coders Sep 27 '16 at 06:40
2

item.html will always be interpreted as text. you have to convert it to html explicitly. click here

I have added a render function which will convert each string to html.

Kishore
  • 1,914
  • 1
  • 15
  • 22
  • 3
    mmm ... I think it was too early to celebrate. your solution renders the innerHTML, what I really need is to render the entire HTML. see my update :http://jsfiddle.net/DrtNc/4/ – Shlomi Schwartz Jul 10 '12 at 09:59
  • this doesnt work with nested tags or if you have some part of the text out of the tags – Xsmael Oct 03 '17 at 11:06