AngularJS - удалить \n из данных

Каков наилучший способ поймать и форматировать "\n\n" внутри текста, передаваемого с сервера, для отображения разрывов строк? Fiddle здесь: 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
}];

Ответ 1

Вы можете использовать ngBindHtmlUnsafe директиву с terms: '... ...'

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

Вы можете отправить html в AngularJS или отправить строку с помощью \n и заменить ее на   в контроллере AngularJS. В любом случае это сработает. Надеюсь, что это поможет.

Демо

Ответ 2

Вы также можете использовать собственный фильтр для замены \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>') : '';
      };
});

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

Поскольку новые версии Angular удалены ng-bind-html-unsafe @Tamlyn ответ теперь лучший ответ. Я просто изменил способ ввода $sce в функцию для скорости.

HTML

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

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

jsFiddle

Ответ 3

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

Ответ 4

У вас есть следующие возможности:

используйте тег pre и сохраняйте \n
используйте white-space:pre правило css и держите \n
замените \n тегом  , предложенным @sza.

Ответ 5

Если "text" имеет значение null, он возвращает ошибку, я добавил:

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

Ответ 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>