如何让 textarea 识别 AngularJS 中的新行？
[英]How do I make a textarea recognize new lines in AngularJS?
问题描述
Here's a simple example of what I'm trying to put into an angular app.
这是我尝试将内容放入 angular 应用程序的一个简单示例。 I have a textarea whose text will be output to another part of the page, and if newlines are made in the textarea, I'd like those to transfer over as well.我有一个 textarea，它的文本将输出到页面的另一部分，如果在 textarea 中制作了换行符，我希望它们也可以转移。 I've tried the answer given here , but that case wasn't using angular and it doesn't seem to be working for me (I tried it by using {{sometext.replace(/\\n/g, "<br />")}} but that just breaks the expression and just displays the expression as a string with curly braces and all. How can I fix this?我已经尝试过这里给出的答案，但是那个案例没有使用 angular 并且它似乎对我不起作用（我通过使用{{sometext.replace(/\\n/g, "<br />")}}但这只是打破了表达式，只是将表达式显示为一个带花括号的字符串。我该如何解决这个问题？
var app = angular.module('SomeApp', []); app.controller('SomeController', function($scope){ $scope.sometext = "Some text\\nMore text"; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app='SomeApp'> <div ng-controller='SomeController'> <textarea ng-model='sometext' rows='8' cols='25'></textarea> <p>{{sometext}}</p> </div> </body>
6 个解决方案
解决方案1
3 已采纳 2015-08-01 10:00:41
There are two problems in your code above:上面的代码有两个问题：
- You are trying to render a
\\nas a new line in an html page, html doesn't recognize it as an html.您正在尝试将\\n呈现为 html 页面中的新行，html 无法将其识别为 html。
To solve this, you must replace all the \\n within the string when rendering by creating a filter.要解决此问题，您必须在渲染时通过创建过滤器替换字符串中的所有\\n 。 The filter below uses an array of regular expression and value pair that replaces the string that you want to render.下面的过滤器使用一个正则表达式和值对数组来替换您要呈现的字符串。
JAVASCRIPT爪哇脚本
.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 || '');
};
});
- The second problem is that the filter is not enough to render the html.第二个问题是过滤器不足以呈现html。 Instead of interpolating the string itself via
{{}}, use theng-bind-htmlas it is intended to render string as an html.不要通过{{}}插入字符串本身，而是使用ng-bind-html因为它旨在将字符串呈现为 html。 Additionally, you have to include thengSanitizemodule, forng-bind-htmlto render html properly without problems.此外，您必须包含ngSanitize模块，以便ng-bind-htmlhtml 正确呈现 html 而不会出现问题。
HTML HTML
<p ng-bind-html="someText | htmlize"></p>
NOTE笔记
You can add more expression and value pairs in the HTMLIZE_CONVERSIONS array.您可以在HTMLIZE_CONVERSIONS数组中添加更多表达式和值对。
解决方案2
2 2017-09-19 06:19:13
You can use another textarea instead of p您可以使用另一个 textarea 代替 p
<textarea ng-model="sometext"> "you can type your input here"</textarea>
<textarea readonly> {{sometext}} </textarea>
first line gets your input while the second just just shows the input第一行获取您的输入，而第二行仅显示输入
解决方案3
1 2020-04-01 12:53:03
<textarea [(ngModel)]="sometext"></textarea> <pre style="font-family: Arial;">{{sometext}}</pre> <textarea [(ngModel)]="sometext"></textarea> <pre style="font-family: Arial;">{{sometext}}</pre>
This one worked for Angular 8.这个适用于 Angular 8。
解决方案4
0 2018-02-17 07:10:13
.filter('nl2br', function ($sce) {
return function (msg, is_xhtml) {
var is_xhtml = is_xhtml || true;
var breakTag = (is_xhtml) ? '<br />' : '<br>';
var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
return $sce.trustAsHtml(msg);
}
});
解决方案5
-1 2015-08-01 09:04:17
Try this:尝试这个：
var app = angular.module('SomeApp', []);
app.controller('SomeController', function($scope){
$scope.sometext = "Some text\nMore text";
$scope.sometext = $scope.sometext.replace(/\n/g, "<br />")
});
解决方案6
-1 2018-02-17 07:14:20
<p ng-bind-html="someText | nl2br"></p>
.filter('nl2br', function ($sce) { .filter('nl2br', 函数 ($sce) {
return function (msg, is_xhtml) {
var is_xhtml = is_xhtml || true;
var breakTag = (is_xhtml) ? '<br />' : '<br>';
var msg = (msg + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
return $sce.trustAsHtml(msg);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.