PaulVO PaulVO - 5 months ago 8
AngularJS Question

AngularJS array value contains HTML tags, doesn't display correctly when called

I have an array (in Angular), that looks like this

$scope.posts = [
{
"ID" : id(),
"Title" : "A",
"Company" : "Company A",
"Location" : "San Francisco, CA",
"Date" : "2016-06-20",
"Description": "Description<br>Desciption part 2",
}
];


The description is called with a
<p>{{post.description}}</p>
in a div with
ng-repeat = "post in posts"
.

The result however is that it shows up like this

Description.<br>Description part 2


Instead of

Description
Description part 2.

The same goes for inserting
<ul>
and
<li>
tags.

Is there any way I can get the html structure in the array value to actually show up as html and not explicitly displayed like this?

Answer

You should use something like ng-bind-html="post.Description" for it to be displayed as HTML.

Or you could possibly use ngSanitize to cleanse the HTML

Something like here - https://jsfiddle.net/datachand/szc550yb/4/

In controller, try using $sce.trustAsHtml(post.Description) if needed