json + angularjs (\n\r)

Frank Drebin
Javascript

Bonjour,
je ne parviens à trouver de solution à mon petit problème, qui se produit à la réception de données json et a sont sont affichage grace à angularjs.
apres une requete http.get avec angularjs je recupere du json que je souhaite afficher mais il ne prend visiblement pas en compte les sauts de ligne et certains caractères.
mon json peut par exemple se présenter de la manière suivante :

"Quote": {
            "id": "20",
            "contenu": "Aurore : vous faites quoi ce soir ? \r\nMoi : Oo ce soir omg\r\nAurore : que jvous pete la gueule lol",
            "created": "2015-02-24 00:35:00",
            "modified": "2015-03-06 19:07:12",
            "valide": "1",
            "comment_count": "2"
        },

Je l'affiche avec agularjs dans des {{ }}, mais je ne sais pas comment faire en sorte qu il prenne en compte : \r\n .
Un petit coup de pouce serait vraiement le bien venu, j'ai regardé du coté du ng-bind-html mais je ne vois pas bien comment le mettre en place dans mon projet :s

6 réponses

shinigami35
Réponse acceptée

Tiens voici un code qui permet de sauter les lignes comme tu le souhaites. Attention il utilise le html-bind du module ngSanitize, je t'invite à regarder la doc.

Script.js

var app = angular.module('test', ['ngSanitize']);

app.controller('vache', function ($scope){

$scope.a = "Aurore : vous faites quoi ce soir ? \r\nMoi : Oo ce soir omg\r\nAurore : que jvous pete la gueule lol";

$scope.b = $scope.a.replace(/\n/g, '<br/>');
});

HTML file

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>

<body ng-app='test'>

<div ng-controller='vache' ng-bind-html='b'>ceci est un test : 
</div>

Si tu as des questions, je suis là.

shinigami35

Je pense que la seule manière est de mettre ton {{quote.contenu}} entre la balise \<pre >. Cette balise permet de respecter les saut de lignes comme les '\r\n'.
Mais sache que c'est moche d'enregistrer des '\r\n' enregistre plutôt des '\n' et encore essaier d'utiliser les balises html comme </br>. C'est plus jolie

Frank Drebin
Auteur

Merci shinigami35 pour ta réponse. Je viens d'essayer la balise < pre > ^^ça ne va pas du tout en effet.
Alors je verrais si je peux intervenir au niveau de l'enregistrement, mais dans le cas où je n'y aurai pas accés, crois tu que je puisse du coup a la reception de mon json remplacer les "\r\n" par des "<br>" ?
Pour tout dire j'ai déjà essyé sans succèsmais je n'arrive pas à savoir si ca viens de l'endoit ou je le fais ou si c'est pas ça ne marcherait pas quoi qu'il arrive.

Frank Drebin
Auteur

Je me suis inspiré de cette discussion, mais je ne vois pas comment m'en servir, nottament au niveau de mon controller qui recupere le json avec : 


$http.get("http://localhost:8888/cakephp/sites_cake/cakephp2.6.2-tppt/quotes.json")
    .success(function(response) {
        $scope.quotes = response.replace(/n/g, '<br>');
    })
    .error(function(){document.write("Serveur inaccessible.");});

Car la je le recupère au scope.

Maenhyr

Que ne comprends tu pas dans le code que tu as fourni ?

Frank Drebin
Auteur

Merci pour le coup de main j'ai réussi avec ngSanitize du coup et c'eest plus propore comme ça =)