web-dev-qa-db-fra.com

AngularJS - Supprimer\n des données

Quel est le meilleur moyen de capturer et de formater le "\ n\n" contenu dans le texte transmis par le serveur pour afficher les sauts de ligne? Fiddle est ici: 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
}];
javascriptjsonangularjs
12
Nick

Vous pouvez utiliser la directive ngBindHtmlUnsafe , avec terms: '... <br/><br/>...'

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

Vous pouvez envoyer le code HTML à AngularJS ou envoyer la chaîne avec \n et la remplacer par <br/> dans le contrôleur d'AngularJS. De toute façon devrait fonctionner. J'espère que ça aide.

Demo

6
zsong

Vous pouvez également utiliser un filtre personnalisé pour remplacer \n par <br>.

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

Et le filtre.

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

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

Depuis les nouvelles versions de Angular supprimées ng-bind-html-unsafe, la réponse @Tamlyn est désormais la meilleure réponse. Je viens de changer la façon dont $sce a été injecté dans la fonction à des fins de rapidité.

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

17
L105

Angular 1.2 supprimé ng-bind-html-unsafe, voici donc une solution mise à jour.

Le HTML:

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

Et le JS:

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

Vous avez les options suivantes:

  • utilisez la balise pre et conservez \n
  • utiliser white-space:pre règle css et conserver \n
  • remplacez \n par la balise <br> comme @sza offert.
6
vittore

Si 'text' est null, cela retourne une erreur, j'ai ajouté:

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

Vous pouvez créer un filtre simple qui divisera votre chaîne en paragraphes:

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

Et utilisez-le en vue pour les afficher:

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

bind-html-unsafe n'est pas nécessaire.

Voir ceci en action dans l'extrait de code:

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>

Ce n'est pas mon idée mais je ne trouve pas la source pour l'instant

0
fracz