13

捕获和格式化从服务器传递的文本中的“\n\n”以显示换行符的最佳方法是什么？小提琴在这里：http: //jsfiddle.net/nicktest2222/2vYBn/

$scope.data = [{
    terms: 'You agree to be bound be the terms of this site. \n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus lectus ac nunc malesuada, fringilla feugiat nibh rhoncus. Vestibulum adipiscing mi in est consectetur, vitae facilisis nulla tristique. Nam eu ante egestas, ultricies tellus eu, suscipit neque.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula non tellus semper iaculis eget vestibulum metus. Nunc aliquam eros sit amet sapien posuere, ac hendrerit risus ultricies. Vivamus nec enim sed eros placerat pulvinar a quis dui.',
    agreed: false
}];
4

6 回答 6

17

您还可以使用自定义过滤器替换\n为<br>.

<p ng-bind-html-unsafe="data[0].terms | nl2br"></p>

和过滤器。

angular.module('myApp', [])
  .filter('nl2br', function(){
      return function(text) {
           return text ? text.replace(/\n/g, '<br>') : '';
      };
});

**编辑/更新 - 2014-12-10 **

由于新版本的 Angular 删除ng-bind-html-unsafe了 @Tamlyn 答案现在是最好的答案。为了提高速度，我只是改变$sce了注入函数的方式。

HTML

<p ng-bind-html="data[0].terms | nl2br"></p>

JS 

.filter('nl2br', ['$sce', function ($sce) {
    return function (text) {
        return text ? $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) : '';
    };
}]);

jsFiddle

于 2013-08-14T15:47:44.617 回答
12

Angular 1.2 被移除ng-bind-html-unsafe，所以这里有一个更新的解决方案。

的HTML：

<p ng-bind-html="data[0].terms | nl2br"></p>

和 JS：

.filter('nl2br', function ($sce) {
    return function (text) {
        return text ? $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) : '';
    };
})
于 2014-04-08T16:36:21.043 回答
6

您有以下选择：

  • 使用pre标签并保留\n
  • 使用white-space:precss 规则并保持\n
  • 替换为@sza 提供\n的标签。<br>
于 2013-08-14T15:33:26.443 回答
6

您可以使用ngBindHtmlUnsafe指令，与terms: '... <br/><br/>...'

<p ng-bind-html-unsafe='data[0].terms'></p>

您可以将 html 发送到 AngularJS，或者发送字符串并在 AngularJS 的控制器中\n替换它。<br/>无论哪种方式都应该有效。希望能帮助到你。

Demo

于 2013-08-14T15:32:01.147 回答
2

如果“文本”为空，则返回错误，我补充说：

.filter('nl2br', function(){
    return function(text){
        return text?text.replace(/\n/g, '<br/>'):'';
    };
});
于 2014-04-06T14:43:30.057 回答
0

您可以创建一个简单的过滤器，将您的字符串分成段落：

.filter('lines', function() {
    return function(text) {
      return angular.isString(text) ? text.split(/\n/g) : text;
    }
  })

并在视图中使用它来显示它们：

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

没有必要bind-html-unsafe。

在代码段中查看此操作：

angular.module('module', [])
  .filter('lines', function() {
    return function(text) {
      return angular.isString(text) ? text.split(/\n/g) : text;
    }
  })
  .controller('MyCtrl', function($scope) {
    $scope.myText = "First line\nSecondLine\nThird line\n\n\n\n\nAlone line";
  });
p {
  min-height: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module">
  <div ng-controller="MyCtrl">
    <p ng-repeat="paragraph in myText | lines track by $index">{{ paragraph }}</p>
  </div>
</div>

这不是我的主意，但我现在找不到来源

于 2016-04-19T07:29:12.300 回答