Au sein de l'angulaire, j'ai besoin de générer une série d'éléments de paragraphe d'un bloc de texte contenant des caractèresWLINE?
Je peux penser à quelques façons de le faire. Cependant, je me demande s'il existe une manière "officielle" angulaire ou que l'approche la plus élégante serait dans le contexte angularjs.
de: < BlockQuote>
Lorem Ipsum Dolor Sit Amet, conseceturer adipiscing Elit. \ n
Sed diam Nibh Nibh euismod TinMEnt Ut Laoreet Dolore. \ n
Magna Aliquam Erat Volutpat. UT Wisi Enim Aimfl tofl Veniam.
à: Je peux penser à un certain nombre de façons de faire ceci:
4 Réponses :
La meilleure solution que je puisse penser était de créer un filtre: Ceci prend un bloc de texte et crée un nouvel élément de tableau pour chaque paragraphe. P> Ce tableau peut ensuite être branché dans une directive NG-REPEAT: P> <p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>
On dirait un peu de frais généraux et dangereux.
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function($scope){
$scope.myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSed diam nonummy nibh euismod tincidunt ut laoreet dolore.\nMagna aliquam erat volutpat. Ut wisi enim ad minim veniam."
});
myApp.filter('nl2p', function () {
return function(text){
text = String(text).trim();
return (text.length > 0 ? '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>' : null);
}
});
http://jsfiddle.net/moderndegree/934aZ/
Cette approche coupera la chaîne puis placez le HTML dans le DOM à l'aide de la ngsanitize angulaire. Cela devrait en faire un peu plus difficile pour quelqu'un d'essayer d'insérer un balisage malveillant.
Le seul inconvénient de cette approche est qu'il nie les éléments de paragraphe résultants dans un autre élément DOM. Dans votre exemple un . Mais c'est un peuple assez mineur.
N'oubliez pas d'inclure le module NgSanitize et le fichier JS
Fantastique, mais la regex doit se terminer par G pour effectuer le remplacement plus d'une fois (par exemple / [\ r \ n] + / g ). Linky: jsfiddle.net/934az/47
Ceci est un piratage stupide, mais cela fonctionne autour des paragraphes étant entourés d'autres balises, telles que :
Vous pourriez résoudre ce problème avec une propriété
C'est vraiment une très bonne approche alternative. Il n'ajoute pas plusieurs paragraphes tels que demandés, mais dans la plupart des cas, le résultat visuel est le même.