The ngBindHtml feature in AngularJS 1.2 does not handle processing of line breaks (/r & /n)

Question

The ngBindHtml feature in AngularJS 1.2 does not handle processing of line breaks (/r & /n)

I have a string with a lot of extra whitespace, as it appears 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"

Using the new Angular 1.2.0 ngBindHtml, I'm processing it in my controller like this:

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

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

However, when I display it in my view (using

<p ng-bind-html="care"></p>

), it shows up as:

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

When it should actually be:

MATERIAL

56% Acrylic, 24% Rayon, 20% Polyester 

CARE 

Machine Wash, Gentle Or Delicate

One possible solution is to use a regex replace to find all instances of \r\n and replace them with <br />.

Edit: It's worth noting that even though there are no HTML tags in the example above, there are often some, which is why I need to use ngBindHtml instead of <pre> tags.

javascript angularjs ng-bind-html

Answer 1

Answer №1

NgBindHtml simply prevents tag escaping. In this case, there are no tags present. An alternative solution could be replacing all instances of \r\n with <br/>. Alternatively, you could create a custom directive for this task, or utilize <pre> tags.

Answer 2

NgBindHtml simply prevents tag escaping. In this case, there are no tags present. An alternative solution could be replacing all instances of \r\n with <br/>. Alternatively, you could create a custom directive for this task, or utilize <pre> tags.

Answer 3

Answer №2

That code snippet you're working with isn't actually formatted in HTML; it's just plain text. As a result, there's no need to utilize ng-bind-html or trustAsHtml. Instead, you can simply showcase the value within a <pre> block:

<pre>{{ message }}</pre>

Answer 4

That code snippet you're working with isn't actually formatted in HTML; it's just plain text. As a result, there's no need to utilize ng-bind-html or trustAsHtml. Instead, you can simply showcase the value within a <pre> block:

<pre>{{ message }}</pre>

The ngBindHtml feature in AngularJS 1.2 does not handle processing of line breaks (/r & /n)

Answer №1

Answer №2

Similar questions

Is GetStaticPath in NextJS suitable for generating large amounts of static data?

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

Unable to receive Ajax POST requests in PHP

Encountering difficulty locating a module despite following the correct path according to the official NEXT.js documentation

Anticipating the resolution of the $rootScope value in Angular before the page is fully loaded

What are the benefits of using React.useMemo or React.useCallback within component props?

How can I align Javascript output vertically in the middle?

How can I retrieve data from local storage based on a specific key value using a query?

The process of combining identical data values within an array of objects

Using JavaScript to replace a radio button with the term "selected"

Enhancing Angular input validators with updates

Adding External JS Files to a Node.js Project

Exploring Angular Material Design's method for vertically populating a column

Using Vue.js to dynamically change attribute values based on a condition

Clicking on a button in HTML to open a JavaScript file

Snapjs allows you to utilize the same drawer for both the left and right sides

Using React to Render a Component with Local Storage Information

Experimenting with animating an element through onClick event using JavaScript

What is the best way to ensure that the user interface stays updated with alterations made to

What is the best way to implement media queries for mobile phones and desktop computers?