Diolor Diolor - 5 months ago 28
AngularJS Question

Preserve line breaks in angularjs

I have seen this SO question.

My code instead of

ng-bind="item.desc"
uses
{{item.desc}}
because I have a
ng-repeat
before.

So my code:

<div ng-repeat="item in items">
{{item.description}}
</div>


The item description contains
\n
for newlines which are not rendered.

How can the
{{item.description}}
display the newlines easily assuming that I have the
ng-repeat
above?

Answer

Try:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

The <pre> wrapper will print text with \n as text


I agree with @Paul Weber that white-space: pre-wrap; is better approach, anyways using <pre> - the quick way mostly for debug some stuff (if you don't want to waste time on styling)

Comments