在数据库中,我保存了文本区域的输入内容,其中你可以添加换行符。但是如何在Angular视图中显示它们?对于PHP来说,这个问题可以通过使用nl2br()
函数解决。
像这样<div>{{ item.foobar }}</div>
,将保存在数据库中的带有换行符的内容以换行符形式展示。
在数据库中,我保存了文本区域的输入内容,其中你可以添加换行符。但是如何在Angular视图中显示它们?对于PHP来说,这个问题可以通过使用nl2br()
函数解决。
像这样<div>{{ item.foobar }}</div>
,将保存在数据库中的带有换行符的内容以换行符形式展示。
将HTML绑定似乎有点不安全。CuriousGuy建议的指令需要额外的工程处理才能正确转义HTML。
我发现使用样式规则white-space: pre-line
更容易。
示例请见JSFiddle。
另请参阅:
white-space: pre-line
是我认为最简单的解决方案。 - Harrison O最佳解决方案:
<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>
<br />
,所有其他标签都将被转义。 而且不要忘记加载ngSanitize
模块(angular-sanitize.js
脚本)。在谷歌搜索AngularJS nl2br后,得到了以下结果:
AngularJS - Remove \n from data
特别是最后一个回答,演示了如何使用过滤器将换行符替换为<br />
。与ng-bind-html结合使用,因为不安全版本可能当前不可用。插入数据库时,您应该将换行符转换为<br />
(对我来说更有意义)。