Question

在将文本框绑定到angular变量时，有没有办法保留换行符？

我有以下内容：

<div class="form-group" ng-class="{invalid: !callerIssue.issuedec.$valid}">
    <label for="issuedec" class="control-label">Issue Description</label>
    <textarea name="issuedec" class="form-control" maxlength="999" rows="7" ng-model="Description" required=""></textarea>
</div>

我想保留用户在Description变量中输入的格式;即换行符，如下所示：

 $scope.Description = "Testing <br/> Data";

Answer 1

HTML标记不会在标准文本区域中呈现，如果您需要在描述中呈现HTML并且能够使用HTML标记进行编辑，那么您可能需要沿着WYSIWIG编辑器的路径进行操作

如果您需要担心它只是换行符，您可以使用＆＃39; \ n＆＃39;的textnode换行符。你不需要做任何事情，因为它将保留在字符串中。如果您的初始数据包含＆＃34; br＆＃34;首先，您可以使用下面的替换来转换它：

$scope.Description = "Testing\nData";

你可以转换＆＃39; br＆＃39;标记为文本节点换行符，如下所示：

$scope.Description = "Testing <br /> Data";
$scope.Description = $scope.Description.replace(/<br\s*\/?>/mg,"\n");

请参阅http://jsfiddle.net/sjmcpherso/bjxjep6v/

Answer 2

当绑定到angularjs变量时，textarea中的换行符会被保留。尝试将键入的文本放在'pre'标记内。在控制器中访问时，也会保留换行符。以下是一个例子

var app = angular.module('app', []);

app.controller('MyCtrl', ['$scope', function($scope) {
       
        $scope.alertDescription = function(text){
            alert(text);
        }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html data-ng-app="app">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    
    <body>
        <div ng-controller="MyCtrl">
        <textarea ng-model="Description" required=""></textarea>
        <pre ng-bind="Description"></pre> 
        <button ng-click="alertDescription(Description)">Alert</button>
        </div>
    </body>
</html>

在Angular Binding中保留HTML文本框换行符格式

2 个答案: