AngularJS - 从数据中删除\n

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

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: '... <br/><br/>...'

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

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

Demo

Answer 4

您有以下选择:

• 使用pre标签并保持\n
• 使用white-space:precss规则并保持\n
• 更换\n用<br>标签作为@sza提供.