Question

捕获和格式化从服务器传递到显示换行符的文本内部的“\ 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
}];

Answer 1

您还可以使用自定义过滤器将\n替换为 。

<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

Answer 2

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/>')) : '';
    };
})

Answer 3

您可以使用ngBindHtmlUnsafe指令和terms: '... ...'

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

您可以将html发送到AngularJS，或者发送带有\n的字符串，并将其替换为AngularJS控制器中的 。无论哪种方式都应该有效。希望它有所帮助。

的 Demo

Answer 4

您有以下选择：

使用pre代码并保留\n
使用white-space:pre css规则并保留\n
将\n替换为 标记为@sza提供。

Answer 5

如果＆＃39; text＆＃39;如果为null则返回错误，我补充说：

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

Answer 6

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

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

这不是我的想法，但我现在找不到来源

AngularJS - 从数据中删除\ n

6 个答案: