简体   繁体   中英

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:

在此处输入图片说明

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?

您可以尝试使用pre标签吗:

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

只需将此样式应用于您的元素:

white-space: pre;

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM