如何让 textarea 识别 AngularJS 中的新行？
[英]How do I make a textarea recognize new lines in AngularJS?
问题描述
这是我尝试将内容放入 angular 应用程序的一个简单示例。 我有一个 textarea，它的文本将输出到页面的另一部分，如果在 textarea 中制作了换行符，我希望它们也可以转移。 我已经尝试过这里给出的答案，但是那个案例没有使用 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
上面的代码有两个问题：
- 您正在尝试将
\\n呈现为 html 页面中的新行，html 无法将其识别为 html。
要解决此问题，您必须在渲染时通过创建过滤器替换字符串中的所有\\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 || '');
};
});
- 第二个问题是过滤器不足以呈现html。 不要通过
{{}}插入字符串本身，而是使用ng-bind-html因为它旨在将字符串呈现为 html。 此外，您必须包含ngSanitize模块，以便ng-bind-htmlhtml 正确呈现 html 而不会出现问题。
HTML
<p ng-bind-html="someText | htmlize"></p>
笔记
您可以在HTMLIZE_CONVERSIONS数组中添加更多表达式和值对。
解决方案2
2 2017-09-19 06:19:13
您可以使用另一个 textarea 代替 p
<textarea ng-model="sometext"> "you can type your input here"</textarea>
<textarea readonly> {{sometext}} </textarea>
第一行获取您的输入，而第二行仅显示输入
解决方案3
1 2020-04-01 12:53:03
<textarea [(ngModel)]="sometext"></textarea> <pre style="font-family: Arial;">{{sometext}}</pre>
这个适用于 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
尝试这个：
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', 函数 ($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);
}
});
你如何做一个 <textarea> 知道按Enter键是\\ n字符？
[英]How do you make a <textarea> recognize that pushing the enter button is a \n character?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.