带有换行符的AngularJS字符串，无中断显示
在数据库中，我保存来自textarea的输入，您可以在其中添加换行符。但如何以角度展示他们？对于PHP，这是nl2br()。带有换行符的AngularJS字符串，无中断显示
与<div>{{ item.foobar }}</div>一样，显示的中断与数据库中保存的类似。
谷歌搜索angularjs nl2br产生了这样的结果：
AngularJS - Remove \n from data
即它演示了如何使用过滤器<br />更换新的行内最后的答案。将其与ng-bind-html结合使用，因为不安全的版本可能目前不可用。将它们插入数据库时，您应该将换行符转换为<br />（对我来说更有意义）。
如果你想只添加和所有其余的文字显示为的是你可以使用下面的过滤器换行：
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脚本）。
完整的工作示例，您可以找到on jsFiddle。
任何特定的原因，你不只是做'return（input ||''）.replace（/ \ n/g，'
'）;'？ –
CWSpear
@CWSpear这个想法是让'someVar'显示为简单的文本，而不需要呈现HTML标签（除了'
'在换行符上）。你可以比较这两个jsFiddles：[第一]（http://jsfiddle.net/mqcpe/6/）和[第二个]（http://jsfiddle.net/mqcpe/4/） –
Curious
@CWSpear我的appologies，这里是更正了jsFiddles：[first]（http://jsfiddle.net/mqcpe/7/）和[second]（http://jsfiddle.net/mqcpe/8/）。（StackOverflow自发布5分钟后不允许编辑注释） – Curious
绑定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绑定，HTML - 这不是安全并在控制台中显示错误。
这也可以用于使用换行符（\ n）询问/回答相同的问题，而不仅仅是html中断（
）。 – discodane