Angulaire affichage de plusieurs bordée de chaînes de caractères sur une seule ligne
Je suis en train d'essayer d'obtenir une chaîne de caractères à afficher sur une page web par le biais de Angularjs qui peut avoir plusieurs lignes. Voici ce que j'ai obtenu:
<textarea ng-model="StringValue"></textarea>
{{StringValue}}
Lorsque vous tapez dans le textarea:
"C'est
une chaîne"
vous bénéficiez de:
"Ceci est une chaîne"
Comment voulez-vous obtenir si le texte est affiché de la même manière, il est tapé?
OriginalL'auteur Luke Drew | 2013-08-29
Vous devez vous connecter pour publier un commentaire.
Que d'autres de réponse mentionné, vous pouvez utiliser un filtre pour l'atteindre.
Permettez-moi de le mettre en œuvre pour vous:
OriginalL'auteur zsong
C'est un problème de HTML. Pas Angulaire. Angulaire est écrit exactement ce que vous avez dit.
En HTML, en dehors d'un
<pre>
tag, une infinité d'espaces (les retours, les tabulations, espaces, etc...) sont toutes traitées comme un espace blanc. C'est pourquoi vous avez besoin des choses comme<br/>
et
si vous n'êtes pas à l'aide d'un<pre>
balise de bloc.Donc, essayez ceci en HTML, de sorte que vous obtenez une compréhension de ce qui se passe:
Voici un Violon démonstration ci-dessus.
Vous allez avoir besoin pour le style de la PRÉ balise avec une certaine classe personnalisée pour la faire ressembler à l'autre texte sur votre page, cependant, parce que la plupart des styles par défaut pour
<pre>
allons utiliser à espacement fixe (largeur fixe) les polices de caractères comme la Messagerie ou de Consolas.Soit ça, ou vous allez avoir à écrire un filtre angulaire qui traite les espaces, les tabulations et les sauts de ligne dans le balisage. ... qui va être difficile à maintenir.
EDIT: avec la compréhension ci-dessus, une solution Angulaire (si vous n'avez pas seulement l'utilisation de PRÉ)
Donc, la meilleure solution, OMI, si vous ne voulez pas utiliser le
<pre>
balise serait de créer un filtre qui va défiler le texte pour vous et farmat avec les sauts de ligne et les espaces insécables.Quelque chose comme cela
Ensuite pour l'utiliser, vous feriez quelque chose comme ceci:
Important à noter:
angular-sanitize.js
fichier dans votre script de références.'ngSanitize'
dans votre déclaration de module:.. c'est si vous pouvez utiliser la
ng-bind-html
oung-bind-html-unsafe
directives.Voici une plunk qui montre l'utilisation.
OriginalL'auteur Ben Lesh
Être prudent avec
ng-bind-html
- très facile à obtenir script de site à site d'injection.Si vous voulez montrer à vos retours à la ligne, sans XSS dans vos pages
vous pouvez utiliser css simple règle:
white-space: pre
:Sûr, vous pouvez faire classe css pour cela:
Aussi, cette méthode rend tous les espaces visibles: les espaces, les espaces multiples onglets et ainsi des autres.
OriginalL'auteur vp_arth
Vous pouvez toujours utiliser un PRÉ tag:
Une autre façon que vous pouvez faire:
avec une fonction de contrôleur:
Ou, une meilleure approche, comme @sza montre, c'est de le transformer dans un filtre. Voici une exemple de travail.
OriginalL'auteur Brian Genisio
La bonne, la plus simple, du point de vue sémantique bonne façon de gérer votre situation est l'utilisation d'un
pre
tag. Ces balises sont spécifiquement conçus pour déjà au format texte, qui est ce que vous avez ici. Texte enpre
balises peuvent facilement être dessiné pour ressembler à la normale de texte à l'aide de CSS.OriginalL'auteur Hugo Wood
Vous pouvez utiliser un filtre de convertir de nouvelles lignes \n html pauses.
{{StringValue | breakFilter}}
OriginalL'auteur m.e.conroy
Ne me demandez pas pourquoi, mais pour le
replace
de travail, j'ai eu une\
en face de la\n
OriginalL'auteur yeahlad