Збережіть розриви рядків у кутах

Я бачив це питання ТАК

Мій код замість ng-bind="item.desc"використання, {{item.desc}}тому що я мав ng-repeatраніше.

Тож мій код:

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

Опис елемента містить \nнові рядки, які не відображаються.

Як легко {{item.description}}відображати нові рядки, вважаючи, що я маю ng-repeatвищезазначене?

На основі відповіді @pilau - але з покращенням, яке навіть прийнятої відповіді не має.

<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;
}

Це використовує нові рядки та пробіли, як задано, але також порушує вміст на межі вмісту. Більше інформації про властивість білого простору можна знайти тут:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Якщо ви хочете перейти на нові рядки, але також згорнути кілька пробілів або пробіл перед текстом (дуже подібний до оригінальної поведінки браузера), ви можете використовувати, як @aaki запропонував:

white-space: pre-line;

Приємне порівняння різних режимів візуалізації: http://meyerweb.com/eric/css/tests/white-space.html

Спробуйте:

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

<pre>Обгортка буде друкувати текст з в \nвигляді тексту

також якщо ви надрукуєте json, для кращого вигляду використовуйте jsonфільтр, наприклад:

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

Demo

Я погоджуюся з тим, @Paul Weberщо white-space: pre-wrap;краще використовувати підхід, у будь-якому випадку <pre>- швидкий спосіб в основному для налагодження деяких речей (якщо ви не хочете витрачати час на стилізацію)

З CSS це так просто (це працює, клянусь).

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

• Подивися ма! Без додаткових тегів HTML!

За допомогою CSS цього можна легко досягти.

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

Або для цього можна створити клас CSS і використовувати його із зовнішнього файлу CSS

Ну, це залежить, якщо ви хочете прив'язувати дані, не повинно бути форматування в ньому, інакше ви можете bind-htmlі description.replace(/\\n/g, '<br>') не впевнені, що це все, що ви хочете.

рішення css працює, однак ви не дуже контролюєте стилізацію. У моєму випадку я хотів трохи більше місця після розриву лінії. Ось директива, яку я створив для обробки цього (машинопис):

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

Використання:

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

Все, що вона робить, це загортати кожну частину тексту в <p>тег. Після цього ви можете стилізувати його як завгодно.

Просто додайте це до своїх стилів, це працює для мене

white-space: pre-wrap

Цей текст <textarea>можна відобразити так, як він знаходиться там із пробілами та лінійними гальмами

HTML

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

CSS

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

Так, я б або використовувати <pre>тег або використовувати ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (використання нг-пов'язувати-HTML , якщо ви використовуєте 1.2+) після використання .replace()в змінити /nна<br />

Просто використовуйте стиль css "white-space: попередньо оберніть", і ви повинні бути гарними. У мене був той самий випуск, де мені потрібно обробляти повідомлення про помилки, для яких розриви рядків та пробіли справді є особливими. Я щойно додав цей рядок, де я прив'язував дані, і він працює як Чарівність!

У мене була схожа проблема з вами. Я не так захоплююсь іншими відповідями тут, тому що вони насправді не дозволяють вам легко стилізувати поведінку нового рядка. Я не впевнений, чи маєте ви контроль над вихідними даними, але прийняте нами рішення було переключити "елементи" з масиву рядків на масив масивів, де кожен елемент у другому масиві містив рядок тексту . Таким чином ви можете зробити щось на кшталт:

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

Таким чином, ви можете застосувати класи до абзаців і красиво стилювати їх за допомогою CSS.