Widziałem to TAK pytanie.
Mój kod zamiast ng-bind="item.desc"
używa, {{item.desc}}
ponieważ mam ng-repeat
przed.
Więc mój kod:
<div ng-repeat="item in items">
{{item.description}}
</div>
Opis pozycji zawiera \n
znaki nowej linii, które nie są renderowane.
Jak można {{item.description}}
łatwo wyświetlać znaki nowej linii, zakładając, że mam ng-repeat
powyższe?
angularjs
angularjs-ng-repeat
Diolor
źródło
źródło
div
pomocąstyle="white-space:pre-wrap;"
.Odpowiedzi:
Na podstawie odpowiedzi @pilau - ale z poprawą, której nie ma nawet zaakceptowana odpowiedź.
Spowoduje to użycie podanych nowych linii i białych znaków, ale także złamanie zawartości na granicach zawartości. Więcej informacji na temat właściwości białych znaków można znaleźć tutaj:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Jeśli chcesz przerywać w nowych wierszach, ale także zwinąć wiele spacji lub odstępów poprzedzających tekst (bardzo podobne do zachowania oryginalnej przeglądarki), możesz użyć, zgodnie z sugestią @aaki:
Ładne porównanie różnych trybów renderowania: http://meyerweb.com/eric/css/tests/white-space.html
źródło
pre-line
wspomniałeś, czy nie byłby to preferowany? Jest bliżej sposobu, w jaki HTML zwykle renderuje zawartość tekstową swoich węzłów i nadal zachowuje znaki nowej linii.pre-line
jest droga do zrobienia. Dzięki Paul!Próbować:
<pre>
Wrapper będzie drukowanie tekstu z\n
jako tekstrównież jeśli drukujesz json, dla lepszego wyglądu użyj
json
filtra, takiego jak:Demo
Zgadzam się z
@Paul Weber
tymwhite-space: pre-wrap;
jest lepsze podejście, w każdym razie użycie<pre>
- najszybszy sposób głównie do debugowania niektórych rzeczy (jeśli nie chcesz tracić czasu na stylizację)źródło
\n
obszary, których nie znam, a nie na końcu. Myślę, że potrzebuję napre
podstawie twojej edycji.@pilau
odpowiedź jest właściwa, ale nie oznacza to, że moja jest zła i dlatego zostałem odrzucony\n
skończone na<br/>
's, a potem oczywiście te tagi nie były renderowane jako znaczniki HTML ... po tym wszystkim konwersja znalazła twojestyle
rozwiązanie i jest to niesamowita pomoc i uproszczenie ... teraz nie Muszę konwertować wszystkie moje dane backendowe i po prostu wprowadzić kilka zmian w Widoku ... Zasługujesz na +1000!To takie proste z CSS (przysięgam, działa).
źródło
pre
tagu. Może otworzysz kolejne pytanie? A może przegapiłem twój punkt widzenia?Dzięki CSS można to łatwo osiągnąć.
W tym celu można też utworzyć klasę CSS i używać jej z zewnętrznego pliku CSS
źródło
Cóż, to zależy, jeśli chcesz powiązać dane, nie powinno być w tym żadnego formatowania, w przeciwnym razie możesz
bind-html
i nie jesteśdescription.replace(/\\n/g, '<br>')
pewien, czy tego chcesz.źródło
rozwiązanie CSS działa, ale tak naprawdę nie masz kontroli nad stylizacją. W moim przypadku chciałem trochę więcej miejsca po przełamaniu linii. Oto dyrektywa, którą stworzyłem, aby sobie z tym poradzić (maszynopis):
Posługiwać się:
Wszystko, co robi, to zawija każdą część tekstu w
<p>
znacznik. Następnie możesz stylizować, jak chcesz.źródło
Po prostu dodaj to do swoich stylów, to działa dla mnie
Dzięki temu tekstowi
<textarea>
można wyświetlić, ponieważ jest tam ze spacjami i przerwami w liniiHTML
CSS
źródło
Tak, ja też użyć
<pre>
znacznika lub użyćng-bind-html-unsafe
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (wykorzystanie NG-bind-html jeśli używasz 1.2+) po zastosowaniu.replace()
do zmień/n
na<br />
źródło
ng-bind-html-unsafe
jest przestarzałePo prostu użyj stylu „white-space: pre-wrap” w stylu css i wszystko będzie dobrze. Miałem ten sam problem, w którym muszę obsługiwać komunikaty o błędach, dla których podziały wierszy i spacje są naprawdę szczególne. Właśnie dodałem to w wierszu, w którym wiązałem dane i działa jak Urok!
źródło
Miałem z tobą podobny problem. Nie przepadam za innymi odpowiedziami, ponieważ nie pozwalają one na łatwe stylizowanie zachowania nowej linii. Nie jestem pewien, czy masz kontrolę nad oryginalnymi danymi, ale rozwiązanie, które zastosowałem, polegało na przełączeniu „elementów” z tablicy ciągów na tablicę tablic, w której każdy element w drugiej tablicy zawierał wiersz tekstu . W ten sposób możesz zrobić coś takiego:
W ten sposób możesz stosować klasy do akapitów i ładnie je stylizować za pomocą CSS.
źródło