AngularJS：段落元素的换行符

Question

在Angular中，我需要从包含换行符的文本块中生成一系列段落元素？

我可以想出几种方法来做到这一点。然而，我想知道是否有一种“官方”的角度方法，或者在AngularJS的背景下，最优雅的方法是什么。

发件人：

Lorem ipsum dolor sit amet，concetetuer adipiscing elit。\我的名字叫尤伊斯莫德·丁奇登，名字叫拉奥里特·多洛尔。\n
大aliquam erat volipat。我们将尽可能少地生活。

到：

<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>

我可以想出很多方法来做到这一点：

1. 修改控制器中的文本（尽管我宁愿避免修改我的模型）
2. 使用指令，并在链接函数中生成段落（似乎过于繁琐）
3. 使用过滤器（我当前最喜欢的过滤器）创建一个数组以通过管道导入ng repeat

Answer 1

您可以使用css属性解决此问题并在p html元素中使用{{text}}

 white-space: pre-line;

Answer 2

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);
    }
});

http://jsfiddle.net/moderndegree/934aZ/

Answer 3

我能想到的最好的解决方案是创建一个过滤器：

angular.module('myApp').
filter('nlToArray', function() {
  return function(text) {
      return text.split('\n');
  };
});

这将获取一个文本块，并为每个段落创建一个新的数组元素。

然后可以将此阵列插入ng repeat指令：

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>