Question

这是我的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>

因此，当处于编辑模式时，换行符看起来很好并且对textarea进行编辑，但是当我保存文本并再次检索它时，它会丢失换行符。

以下是编辑时的样子：

以下是不编辑时的样子：

我仍然可以在编辑和非编辑之间切换，我会得到相同的结果。

如何在不编辑时显示换行符，我该怎么做？

Answer 1

您可以尝试使用预标签：

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

Answer 2

只需将此样式应用于元素：

white-space: pre;

Answer 3

请你这样使用，

 <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>

可能会有效。

它会给对象，

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

angularjs从textarea保存html

3 个答案: