Сохранить разрывы строк в angularjs

Я видел этот ТАК вопрос.

Мой код вместо того, чтобы 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 (используйте ng-bind-html, если вы используете 1.2+) после использования .replace()для изменить /nна<br />

Просто используйте стиль CSS «white-space: pre-wrap», и все будет хорошо. У меня была та же проблема, когда мне нужно было обрабатывать сообщения об ошибках, для которых действительно характерны разрывы строк и пробелы. Я только что добавил эту строку, где я связывал данные, и она работает как Charm!

У меня была похожая проблема с тобой. Я не очень заинтересован в других ответах здесь, потому что они не позволяют вам очень легко стилизовать поведение новой строки. Я не уверен, что у вас есть контроль над исходными данными, но я принял решение переключить «элементы» с массива строк на массив массивов, где каждый элемент во втором массиве содержал строку текста. , Таким образом, вы можете сделать что-то вроде:

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

Таким образом, вы можете применять классы к абзацам и красиво оформлять их с помощью CSS.