angularjs save html from textarea

Question

this is my html:

      <div ng-if="!item.edit>
           <div class='door-description' ng-bind-html="item.Description"></div>
           <div class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration"></div>
      </div>



<div ng-if="item.edit">
    <textarea elastic class='door-description' ng-bind-html="item.Description" ng-model="item.Description"></textarea>
    <textarea elastic class='door-softvalues' ng-bind-html="item.SoftValues" ng-if="item.IsConfiguration" ng-model="item.SoftValues"></textarea>
</div>

So the linebreak looks good when im in edit mode and do the edit to the textarea but when i save the text and retrieve it again it looses the linebreaks.

Here is what it looks like when editing:

And here is what it looks like when not editing:

I can still toggle between edit and not editing and i will get the same result.

What do i have to do to make the linebreaks appear when not editing?

Arun Ghosh · Accepted Answer · 2016-07-19 12:24:13Z

1

Can you try using pre tag:

<pre class='door-description' ng-bind-html="item.Description"></pre>

answered Jul 19, 2016 at 12:24

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

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

Comments

DerekMT12 · Accepted Answer · 2016-07-19 12:27:48Z

0

Just apply this style to your element:

white-space: pre;

answered Jul 19, 2016 at 12:27

DerekMT12

1,35911 silver badges15 bronze badges

Comments

sankar ganesh · Accepted Answer · 2016-07-19 12:33:42Z

0

Can you please use like this ,

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<textarea elastic class='door-description' ng-bind-html="myText " ng-model="myText "></textarea>
</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <div><h1>John Doe</h1></div>";
});
</script>

may be this will work .

It will give object like ,

My name is: <div><h1>John Doe</h1></div>

answered Jul 19, 2016 at 12:33

sankar ganesh

1331 silver badge8 bronze badges

Collectives™ on Stack Overflow

angularjs save html from textarea

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related