В базе данных я сохраняю данные из текстового поля, где вы можете добавить перерывы. Но как показать их в представлении Angular? Для PHP это nl2br().
Подобно <div>{{ item.foobar }}</div>, показанные перерывы сохраняются так же, как в базе данных.
Связывание HTML кажется немного небезопасным. В директиве, предложенной CuriousGuy, есть немного дополнительной техники, чтобы правильно избежать HTML.
Мне проще использовать правило моделирования white-space: pre-line.
Пример JSFiddle.
См. также:
Лучшее решение:
<div class="multi_lines_text">{{ item.foobar }}</div>
<style>
.multi_lines_text { white-space: pre-line; }
</style>
ng-bind-html - это не безопасный способ и ошибка отображения в консоли.
Если вы хотите добавить только разрывы строк и весь оставшийся текст, который вы хотите показать, вы можете использовать следующий фильтр:
app.filter('nl2br', function() {
var span = document.createElement('span');
return function(input) {
if (!input) return input;
var lines = input.split('\n');
for (var i = 0; i < lines.length; i++) {
span.innerText = lines[i];
span.textContent = lines[i]; //for Firefox
lines[i] = span.innerHTML;
}
return lines.join('<br />');
}
});
то используйте его так:
<div ng-bind-html="someVar | nl2br"></div>
В этом случае только тег HTML, который присутствует в строке результата, <br />. Все другие теги будут экранированы.
И не забудьте загрузить модуль ngSanitize (angular-sanitize.js script).
В полном рабочем примере вы можете найти на jsFiddle.
Поглощение googling nl2br дало этот результат:
AngularJS - удалить \n из данных
А именно последний ответ, демонстрирующий, как заменить новые строки на <br /> с помощью фильтра. Объедините это с ng-bind-html, так как небезопасная версия может быть недоступна в настоящее время. Вероятно, вы должны преобразовать разрывы строк в <br /> при вставке их в базу данных (имеет больше смысла для меня).