CODEWITHSUNDEEP
javascriptangularjs
Daniel Gustafsson
Daniel Gustafsson

Reputation: 1817

angularjs save html from textarea

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:

enter image description here

And here is what it looks like when not editing:

enter image description here

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?

Upvotes: 0

Views: 689

Answers (3)

sankar ganesh
sankar ganesh

Reputation: 133

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>

Upvotes: 0

DerekMT12
DerekMT12

Reputation: 1349

Just apply this style to your element:

white-space: pre;

Upvotes: 0

Arun Ghosh
Arun Ghosh

Reputation: 7734

Can you try using pre tag:

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

Upvotes: 1

Related Questions