如何使 AngularJS 中的 textarea 识别换行符？

14 浏览
0 Comments

如何使 AngularJS 中的 textarea 识别换行符？

这是我尝试在一个Angular应用程序中实现的一个简单示例。我有一个文本区域，其中的文本将输出到页面的另一个部分，如果在文本区域中输入换行符，我希望这些换行符也能传递过来。我尝试了这里给出的答案，但那个例子没有使用Angular，对我来说似乎不起作用（我尝试使用{{sometext.replace(/\\n/g, \"
\")}}，但那只是破坏了表达式，只显示了带有花括号的字符串表达式）。我该如何解决这个问题？\n

var app = angular.module('SomeApp', []);
app.controller('SomeController', function($scope){
  $scope.sometext = "Some text\nMore text";
});

\n



    
    {{sometext}}

0

3 答案

0 Comments

问题的原因是AngularJS中的textarea无法识别换行符，导致在显示文本时无法保留原有的换行格式。解决方法是使用ng-bind-html指令和$sanitize服务来实现。

首先，在HTML中使用ng-bind-html指令来绑定文本内容，同时使用$filter服务中的'newline'过滤器来保留换行符。代码如下：

<div ng-bind-html="sometext | newline"></div>

然后，在AngularJS的控制器中，注入$filter服务和$sanitize服务，并创建'newline'过滤器来替换换行符为HTML的换行标签。代码如下：

var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope, $filter, $sanitize) {
  $scope.sometext = $filter('newline')('This is a test.\nThis is a new line.');
});
app.filter('newline', function($sanitize) {
  return function(text) {
    var replacedText = text.replace(/\n/g, '<br>');
    return $sanitize(replacedText);
  };
});

最后，在CSS中为div元素设置样式来保留原有的换行格式。代码如下：

div {
  white-space: pre-line;
}

通过以上步骤，我们成功解决了AngularJS中textarea无法识别换行符的问题，并且能够正确显示文本的换行格式。

0
0 Comments

在AngularJS中，有时候我们希望在一个<textarea>标签中输入多行文本，并且希望这些文本能够被正确地识别为新的一行。然而，默认情况下，<textarea>标签并不会识别输入的新行。这导致了一个问题：如何在AngularJS中使<textarea>标签能够正确识别新行？

解决方案是使用另一个<textarea>标签来替代<p>标签。首先，我们需要在HTML中添加两个<textarea>标签。第一个<textarea>标签用于输入文本，我们可以使用ng-model指令将输入的文本与AngularJS中的模型进行绑定。代码如下：

<textarea ng-model="sometext"> "在这里输入你的文本"</textarea>

第二个<textarea>标签用于显示输入的文本，我们可以使用双大括号语法将模型中的值展示在<textarea>标签中。代码如下：

<textarea readonly> {{sometext}} </textarea>

这样，第一个<textarea>标签将获取用户输入的文本，而第二个<textarea>标签将展示输入的文本。通过这种方式，我们可以正确地识别输入的新行。

0
0 Comments

问题原因：在AngularJS中，textarea无法识别换行符"\n"作为新行。

解决方法：通过创建过滤器，在渲染时替换字符串中的"\n"。过滤器使用了一个正则表达式和值的数组对，用于替换要渲染的字符串。

下面是解决方法的代码：

.value('HTMLIZE_CONVERSIONS', [
  { expr: /\n+?/g, value: '<br>' }
])
.filter('htmlize', function(HTMLIZE_CONVERSIONS) {
  return function(string) {
    return HTMLIZE_CONVERSIONS.reduce(function(result, conversion) {
      return result.replace(conversion.expr, conversion.value);
    }, string || '');
  };
});

另外，解决这个问题还需要使用`ng-bind-html`指令来渲染HTML，而不是直接使用双括号插值`{{}}`。同时，需要引入`ngSanitize`模块，以便`ng-bind-html`能够正确渲染HTML而不出现问题。

下面是HTML中的代码：

注意：可以在`HTMLIZE_CONVERSIONS`数组中添加更多的正则表达式和值对。

0