javascript AngularJS：段落元素的换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17238977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: newline characters to paragraph elements
提问by George Thomas
Within Angular, I need to generate a series of paragraph elements from a block of text containing newline characters?
在 Angular 中，我需要从包含换行符的文本块中生成一系列段落元素吗？
I can think of a couple of ways to do this. However I am wondering whether there is an "official" Angular way or just what the most elegant approach would be within the AngularJS context.
我可以想到几种方法来做到这一点。但是我想知道是否有“官方”的 Angular 方式，或者在 AngularJS 上下文中最优雅的方法是什么。
An Example
一个例子
From:
从：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. \n
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore. \n
Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
Lorem ipsum dolor 坐 amet，consectetuer adipiscing 精英。\n
Sed diam nonummy nibh euismod tincidunt ut laoreet dolore。\n
Magna aliquam 时代 volutpat。Ut wisi enim ad minim veniam。
to:
到：
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
I can think of a number of ways to do this:
我可以想到很多方法来做到这一点：
- Modify the text in the controller (though I prefer to avoid modifying my models)
- Using a directive, and generating paragraphs in a link function (seems overly cumbersome).
- Using a filter (my current favourite) to create an array to pipe into ng-repeat
- 修改控制器中的文本（虽然我更喜欢避免修改我的模型）
- 使用指令，并在链接函数中生成段落（似乎过于繁琐）。
- 使用过滤器（我目前最喜欢的）创建一个数组以通过管道传输到 ng-repeat
回答by George Thomas
The best solution I could think of was to create a filter:
我能想到的最佳解决方案是创建一个过滤器：
angular.module('myApp').
filter('nlToArray', function() {
return function(text) {
return text.split('\n');
};
});
This takes a block of text and creates a new array element for each paragraph.
这需要一个文本块并为每个段落创建一个新的数组元素。
This array can then be plugged into an ng-repeat directive:
然后可以将此数组插入 ng-repeat 指令：
<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>
回答by Brian Lewis
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function($scope){
$scope.myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSed diam nonummy nibh euismod tincidunt ut laoreet dolore.\nMagna aliquam erat volutpat. Ut wisi enim ad minim veniam."
});
myApp.filter('nl2p', function () {
return function(text){
text = String(text).trim();
return (text.length > 0 ? '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>' : null);
}
});
回答by Walter Palacios
You might solve this with cssproperty and use {{text}} into phtml element
您可以使用css属性解决这个问题，并在phtml 元素中使用 {{text}}
white-space: pre-line;
回答by besson3c
This is a silly hack, but it works around paragraphs being enclosed around other tags, such as <p><h3>:
这是一个愚蠢的 hack，但它适用于被其他标签包围的段落，例如<p><h3>：
text = '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>';
// delete blank lines
text = text.replace(/<p>\s*?<\p>/g, '');
// delete erroneous paragraph enclosed tags
text = text.replace(/<p>\s*?(<.+?>)\s*?(.+?)\s*?(<\/.+?>)\s*?<\/p>/g, '');
