How do I display html coming from a json list in AngularJS?

Question

having a json set of information like

[
    {
    "title":"Title 1",
    "description":"<p>Some HTML</p>"
    },
    {
    "title":"Title 2",
    "description":"<p>Some HTML</p><p>More HTML</p>"
    }
]

how do I show the html in my template. Currently the html is not decoded. I tried with the code below but it doesn't work.

{{item.title}}
<div data-ng-bind-html='item.description'></div>

Controller looks like

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

searchApp.controller('SearchCtrl', function ($scope, $http) {
  $http.get('search-json').success(function(json) {
    $scope.item = json.data;
    $scope.orderProp = 'title';
  });
});

Thank you

if json.data is an array of objects you have to write {{item[0].title}} or use ng-repeat — Edminsson
– Edminsson, Commented Jul 26, 2014 at 14:04
That's what I do, problem is item.description comes out as <p>Some HTML</p> instead of the html — orbitory
– orbitory, Commented Jul 26, 2014 at 14:08

harishr · Accepted Answer · 2014-07-26 14:10:01Z

1

add ngSanitize , inject $sce and then in js

   $scope.getHtml = function(html) {
       return $sce.trustAsHtml(html)    
   }

and in html

<span>{{item.title}}</span>
<div data-ng-bind-html="getHtml(item.description)"> <div>

answered Jul 26, 2014 at 14:10

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

1 Comment

orbitory Over a year ago

Thanks this seems to work but I think that for version 1.3 you don't need the getHtml anymore. Just adding $sce seems to fix the problem for me. Not sure why

Collectives™ on Stack Overflow

How do I display html coming from a json list in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related