Zachowaj podziały wierszy w angularjs

Widziałem to TAK pytanie.

Mój kod zamiast ng-bind="item.desc"używa, {{item.desc}}ponieważ mam ng-repeatprzed.

Więc mój kod:

<div ng-repeat="item in items">
  {{item.description}}
</div>

Opis pozycji zawiera \nznaki nowej linii, które nie są renderowane.

Jak można {{item.description}}łatwo wyświetlać znaki nowej linii, zakładając, że mam ng-repeatpowyższe?

Na podstawie odpowiedzi @pilau - ale z poprawą, której nie ma nawet zaakceptowana odpowiedź.

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

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:

white-space: pre-line;

Ładne porównanie różnych trybów renderowania: http://meyerweb.com/eric/css/tests/white-space.html

Próbować:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

<pre>Wrapper będzie drukowanie tekstu z \njako tekst

również jeśli drukujesz json, dla lepszego wyglądu użyj jsonfiltra, takiego jak:

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Demo

Zgadzam się z @Paul Webertym white-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ę)

To takie proste z CSS (przysięgam, działa).

.angular-with-newlines {
  white-space: pre;
}

• Spójrz mamo! Bez dodatkowych tagów HTML!

Dzięki CSS można to łatwo osiągnąć.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

W tym celu można też utworzyć klasę CSS i używać jej z zewnętrznego pliku CSS

Cóż, to zależy, jeśli chcesz powiązać dane, nie powinno być w tym żadnego formatowania, w przeciwnym razie możesz bind-htmli nie jesteś description.replace(/\\n/g, '<br>') pewien, czy tego chcesz.

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):

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

Posługiwać się:

<div class="pre">{{item.description}}</div>

Wszystko, co robi, to zawija każdą część tekstu w <p>znacznik. Następnie możesz stylizować, jak chcesz.

Po prostu dodaj to do swoich stylów, to działa dla mnie

white-space: pre-wrap

Dzięki temu tekstowi <textarea>można wyświetlić, ponieważ jest tam ze spacjami i przerwami w linii

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}

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ń /nna<br />

Po 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!

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:

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

W ten sposób możesz stosować klasy do akapitów i ładnie je stylizować za pomocą CSS.