How can i display the innerHTML when using an angularJS {{expression}}?

Question

I am displaying a message like this:

<td class="Msg">
  <div class="collapse">
    <h4 class="message">{{statement.Msg}}</h4>
  </div>
</td>

I have tried formatting in many ways but the message always appears like this:

a, b, c, d, e

But there should be a linebreak after each comma. When I look in FireBug, I see that the innerHTML is properly formatted.

How can I display the innerHTML of the statement.Msg?

EDIT: The message in the innerHTML is delimited by \r\n. That is how it's stored in the database and that's the innerHTML I see in FireBug, but it is not formatted that way on the page.

docs.angularjs.org/api/ng/service/$sce / — invernomuto
– invernomuto, Commented May 15, 2017 at 19:53
to clarify, the message in the innerHTML is delimited by \r\n. that is how its stored in the database and thats the innerHTML i see in FireBug, but it is not formatted that way on the page — John Brofser
– John Brofser, Commented May 15, 2017 at 19:55
you will have to run a msg.replace(/\r\n/, ' ') if you want it to respect the line breaks. you can create filter break that does that for you and then you can bind the html to message|break. — Dayan Moreno Leon
– Dayan Moreno Leon, Commented May 15, 2017 at 20:01

Tamas · Accepted Answer · 2017-05-15 19:53:52Z

3

I think you need to use ngSanitize and ng-bind-html:

<h4 ng-bind-html="statement.Msg"></h4>

And in your AngularJS module:

angular.module('myApp', ['ngSanitize']);

For more information (including installation information) please read: https://docs.angularjs.org/api/ngSanitize

answered May 15, 2017 at 19:53

Tamas

11.3k15 gold badges53 silver badges80 bronze badges

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

2 Comments

Alon Eitan Over a year ago

I think that since the user wrote: "the message always appears like this: a, b, c, d, e" then it's just a css issue (As I wrote in my comment on the question), because I would expect they get something like a, b, c, d,  using a regular expression, as demonstrated in the question

Tamas Over a year ago

it's good to provide different options - it could be that your solution will do the job for him.

Alon Eitan · Accepted Answer · 2017-05-15 20:12:14Z

0

As I wrote in my comment: Add white-space: pre; on .message (Read here for all possible values available for the white-space style).

Example:

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.statement = {Msg: "a,\r\nb,\r\nc,\r\nd"};
});

.message { white-space: pre; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="collapse" ng-app="app" ng-controller="ctrl">
    <h4>{{statement.Msg}}</h4>
    <h4 class="message">{{statement.Msg}}</h4>
</div>

Note that the first h4 element don't have message class so you won't get line breaks, while the second one do have this class.

edited May 15, 2017 at 20:12

answered May 15, 2017 at 20:05

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Collectives™ on Stack Overflow

How can i display the innerHTML when using an angularJS {{expression}}?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related