Display content by using angular

Question

I am Building comments feature in my application by using Angularjs. So I have a problem in displaying the data. I am getting data from server like this:

    This is the core collection of directives you would use in your template 
code to build an AngularJS application.\n\nSome examples include: ngClick, ngInclude

the data contains \n. it indicates new Line.For displaying that data I am using ng-bind-html directive with $sce.trustAsHtml(data);. But data is displaying in same line not added new lines.

Can any one Help me Please.

pgreen2 · Accepted Answer · 2014-07-22 17:23:47Z

1

By default whitespace is collapsed within HTML. To get around that, you should use a <pre> tag. White space will no be collapsed within a pre tag.

with `<p>`

<p>
lots of text 
with new lines 
look like this
</p>

lots of text with new lines look like this

with `<pre>`

<pre>
lots of text 
with new lines 
look like this
</pre>

lots of text 
with new lines 
look like this

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

answered Jul 22, 2014 at 17:23

pgreen2

3,6713 gold badges37 silver badges59 bronze badges

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

Comments

pgreen2 · Accepted Answer · 2014-07-22 17:30:38Z

0

Instead of using <pre> which assumes you want to format the entire string, you can simply replace "\n" with <br>:

data.replace("\n","<br>");

answered Jul 22, 2014 at 17:30

pgreen2

3,6713 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

Display content by using angular

2 Answers 2

with `<p>`

with `<pre>`

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

with <p>

with <pre>

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

with `<p>`

with `<pre>`