How can I preserve new lines in an AngularJS partial?

Question

Within an AngularJS partial I am looping over a list of entries as follows:

<ul class="entries">     <li ng-repeat="entry in entries">         <strong>{{ entry.title }}</strong>         <p>{{ entry.content }}</p>     </li> </ul> 

The content of {{entry.content}} have some linebreaks which are ignored by AngularJS. How can I make it preserve the linebreaks?

Answer 1

It is just basic HTML. AngularJS won't change anything about that. You could use a pre tag instead:

<pre>{{ entry.content }}</pre> 

Or use CSS:

p .content {white-space: pre}  ...  <p class='content'>{{ entry.content }}</p> 

If entry.content contains HTML code, you could use ng-bind-html:

<p ng-bind-html="entry.content"></p> 

Don't forget to include ngSanitize:

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

Answer 2

I make filters

// filters js myApp.filter("nl2br", function($filter) {  return function(data) {    if (!data) return data;    return data.replace(/\n\r?/g, '<br />');  }; }); 

then

// view <div ng-bind-html="article.description | nl2br"></div>