json AngularJS - 从数据中删除 \n

AngularJS - Remove \n from data

提问by Nick

What is the best way to catch and format the "\n\n" inside of text being passed from the server to display line breaks? Fiddle is here: http://jsfiddle.net/nicktest2222/2vYBn/

捕获和格式化从服务器传递的文本中的“\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
}];

采纳答案by zs2020

You can use ngBindHtmlUnsafedirective, with terms: '... <br/><br/>...'

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

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

You can either send the html to the AngularJS, or send the string with \nand replace it with <br/>in AngularJS's controller. Either way should work. Hope it helps.

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

Demo

Demo

回答by L105

You can also use a custom filter to replace \nto <br>.

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

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

And the filter.

还有过滤器。

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

** EDIT/UPDATE - 2014-12-10**

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

Since new versions of Angular removed ng-bind-html-unsafe@Tamlyn answer is now the best answer. I just changed the way $scegot injected into the function for speed purpose.

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

HTML

HTML

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

JS

JS

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

jsFiddle

js小提琴

回答by Tamlyn

Angular 1.2 removed ng-bind-html-unsafeso here's an updated solution.

Angular 1.2 已删除，ng-bind-html-unsafe因此这是一个更新的解决方案。

The HTML:

HTML：

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

And the JS:

和JS：

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

回答by vittore

You have the following options:

您有以下选择：

• use pretag and keep \n
• use white-space:precss rule and keep \n
• replace \nwith <br>tag as @sza offered.

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

回答by Jean F.

If 'text' is null it returns an error, I added:

如果 'text' 为 null 它返回一个错误，我补充说：

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

回答by fracz

You can create a simple filter that will split your string into paragraphs:

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

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

And use it in view to display them:

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

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

There is no need for bind-html-unsafe.

没有必要bind-html-unsafe。

See this in action in the snippet:

在代码段中查看此操作：

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>

This is not my idea but I can't find the source right now

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