Я видел это, поэтому вопрос.
Мой код вместо НГ-привязать="в пункт.описание" ииспользует
{{пункт.алфавиту}}`, потому что у меня есть НГ-повторите перед.
Так что мой код:
<div ng-repeat="item in items">
{{item.description}}
</div>
Описание товара содержит \N
для строк, которые не оказаны.
Как {{пункт.описание}}
Показать строки легко предположить, что у меня `НГ-повторите выше?
На основе @плов с ответом - но с улучшением, что даже принято отвечать нет.
<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>
На в <предварительно>
фантик будет печатать текст с \п
в виде текста
также если вам печатать JSON, для фильтра лучше выглядеть польза JSON
, как:
<div ng-repeat="item in items">
<pre>{{item.description|json}}</pre>
</div>
<и>[демо][1]</КБД>
Я согласен с@Павел Вебер", что " бело-пространстве: предварительно обертывание;это лучше, в любом случае, используя в
<предварительно> У` - самый быстрый способ в основном для отладки кое-что (если вы не'т хотите тратить время на укладку)
Это's так просто с CSS (он работает, я клянусь).
.angular-with-newlines {
white-space: pre;
}
С помощью CSS это можно легко достичь.
<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>
Или CSS-класс может быть создан для этой цели и можно использовать из внешнего CSS-файла
Ну, это зависит, если вы хотите привязать данные, там должен'т быть любое форматирование, в противном случае можно привязать HTML-код " и " описание.заменить(/\\п/г, '<БР>')
не уверен, что это'ы что вы хотите.
решение УСБ работает, однако вы действительно не получите контроль над стайлинг. В моем случае я хотел немного больше пространства после линии разрыва. Вот я создал директиву, чтобы справиться с этим (машинопись):
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>
Все это делает обволакивает каждую часть текста в <п>
тег.
После этого вы можете стиль его, как вам захочется.
Да, я бы либо использовать в <предварительно> тег или использовать НГ-привязать к HTML-небезопасно
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (использовать НГ-привязать-HTML, если вы используете 1.2+) после использования .заменить()
изменение /N
в <БР />
Просто использовать CSS стиль на "бело-пространстве: предварительно обертывание" и вы должны быть хорошо идти. Я'вэ была такая же проблема, где мне нужно обрабатывать сообщения об ошибках, для которых переносы строк и пробелы действительно конкретное. Я просто добавил этот поточный, где я привязки данных и он работает как Шарм!
Я имел подобную проблему для вас. Я'м не заинтересованы в том, что других ответов здесь, потому что они Дон'т действительно позволит вам стиль новой строки поведение очень легко. Я'м не уверен, если у вас есть контроль над исходными данными, но решение я принял было переключиться на "пользования" От быть массив строк в массив массивов, где каждый элемент, во второй массив содержит строку текста. Таким образом, вы можете сделать что-то вроде:
<div ng-repeat="item in items">
<p ng-repeat="para in item.description">
{{para}}
</p>
</div>
Таким образом, вы можете применять классы к параграфам и стиль их с помощью CSS.
Просто добавьте это в ваш стиль, это работает для меня
white-space: pre-wrap
Этот текст в <textarea в>
может быть проявлением, как это's в каталоге с пробелами и линии тормоза
В формате HTML
<p class="text-style">{{product?.description}}</p>
УСБ
.text-style{
white-space: pre-wrap
}