I have a string that looks like this (lots of whitespace, this is just how it es out on my server):

 var care_description = "MATERIAL\r\n    \r\n  56% Acrylic, 24% Rayon, 20% Polyester\r\n \r\n  CARE\r\n  \r\n  Machine Wash, Gentle Or Delicate"

I'm using the new Angular 1.2.0 ngBindHtml and processing it in my controller like so:

    $scope.care = $sce.trustAsHtml(care_description);

(the $scope.records[i].accordions array is just a wrapper for Angular-Bootstrap's Accordions module).

When I put this into my view (via a simple <p ng-bind-html="care"></p>)it gets rendered like so:

 MATERIAL 56% Acrylic, 24% Rayon, 20% Polyester CARE Machine Wash, Gentle Or Delicate

When it should be:

MATERIAL

56% Acrylic, 24% Rayon, 20% Polyester 

CARE 

Machine Wash, Gentle Or Delicate

Is the only solution here for me to do a regex replace to find all instances of \r\n and replace them with <br />?

Edit: I should have mentioned, while there are no HTML tags in the example above, often there will be so I need to use ngBindHtml here rather than <pre> tags.

I have a string that looks like this (lots of whitespace, this is just how it es out on my server):

 var care_description = "MATERIAL\r\n    \r\n  56% Acrylic, 24% Rayon, 20% Polyester\r\n \r\n  CARE\r\n  \r\n  Machine Wash, Gentle Or Delicate"

I'm using the new Angular 1.2.0 ngBindHtml and processing it in my controller like so:

    $scope.care = $sce.trustAsHtml(care_description);

(the $scope.records[i].accordions array is just a wrapper for Angular-Bootstrap's Accordions module).

When I put this into my view (via a simple <p ng-bind-html="care"></p>)it gets rendered like so:

 MATERIAL 56% Acrylic, 24% Rayon, 20% Polyester CARE Machine Wash, Gentle Or Delicate

When it should be:

MATERIAL

56% Acrylic, 24% Rayon, 20% Polyester 

CARE 

Machine Wash, Gentle Or Delicate

Is the only solution here for me to do a regex replace to find all instances of \r\n and replace them with <br />?

Edit: I should have mentioned, while there are no HTML tags in the example above, often there will be so I need to use ngBindHtml here rather than <pre> tags.

• javascript
• angularjs
• ng-bind-html

2 Answers 2

All ngBindHtml does is not escape tags. You have no tags here. You could replace all \r\n with <br/>. Or you could write a directive to do it for you. Or just use <pre> tags.

What you have there is not HTML, but plain text. So you shouldn't use ng-bind-html and trustAsHtml. Just display the value inside a <pre> block:

<pre>{{ care }}</pre>