how to render received string where is ENTER sign using angularjs?

Question

I receive next string (it should be 2 rows):

commentBody:"row 1↵row 2"

I need to render it in two rows. But unfortunately in my html code it renders in all in one row.

  <div ng-if="!comment.openEdit" ng-bind-html="comment.commentBody" class="workItemCommentBody"></div>

score 2 · Accepted Answer · edited May 23 '17 at 12:00

Since you didn't provide all the code I am assuming you're using either ngSanitize or $sce.

Read AngularJS Insert HTML into view.

If you want to insert multi line string, first you should replace the line breaks in the string with the <br/>.
Read Replace line breaks with <br/>

I tweaked the regex to match ↵ character while replacing line breaks.

So below is what it looks

angular
  .module('myApp', []);
angular
  .module('myApp')
  .controller('MyController', MyController);

MyController.$inject = ['$scope', '$sce', '$interpolate'];

function MyController($scope, $sce, $interpolate) {
  var commentBody = "row 1↵row 2";
  commentBody=commentBody.replace(/(?:\r\n|\r|\n|\↵)/g, '<br />');
  $scope.comment = {
    openEdit: false,
    commentBody: $sce.trustAsHtml(commentBody)
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController as MC">
  <div ng-if="!comment.openEdit" ng-bind-html="comment.commentBody" class="workItemCommentBody"></div>
</div>

how to render received string where is ENTER sign using angularjs?

1 Answers1