Я видел этот вопрос SO.
Мой код вместо 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
Try:
<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>
Я согласен с @Paul Weber, что white-space: pre-wrap; лучше подходит, в любом случае используя <pre> - быстрый способ в основном отлаживать некоторые вещи (если вы не хотите тратить время на стилизацию)
Это так просто с 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
Ну, это зависит, если вы хотите привязать данные, там не должно быть никакого форматирования, иначе вы можете bind-html и сделать description.replace(/\\n/g, '<br>')
не уверен, что вы хотите.
решение css работает, однако вы не получаете контроля над стилем. В моем случае я хотел немного больше пространства после разрыва строки. Вот директива, которую я создал для обработки этого (typescript):
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>.
После этого вы можете стилизовать его, как хотите.
Да, я бы либо использовал тег <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", и вам должно быть хорошо идти. У меня была такая же проблема, когда мне нужно обрабатывать сообщения об ошибках, для которых разрыв строки и пробелы являются действительно конкретными. Я просто добавил этот inline, где я привязывал данные, и он работает как Charm!
У меня была похожая проблема с тобой. Я не очень заинтересован в других ответах здесь, потому что они не позволяют вам очень легко стилизовать поведение новой строки. Я не уверен, что у вас есть контроль над исходными данными, но я принял решение переключить "элементы" с массива строк на массив массивов, где каждый элемент во втором массиве содержал строку текста., Таким образом, вы можете сделать что-то вроде:
<div ng-repeat="item in items">
<p ng-repeat="para in item.description">
{{para}}
</p>
</div>
Таким образом, вы можете применять классы к абзацам и красиво оформлять их с помощью CSS.
Просто добавьте это к своим стилям, это работает для меня
white-space: pre-wrap
Этот текст в <textarea> может отображаться как он там с пробелами и линейными тормозами
HTML
<p class="text-style">{{product?.description}}</p>
CSS
.text-style{
white-space: pre-wrap
}