Question

在数据库中，我正在保存来自textarea的输入，您可以在其中添加中断。但是如何在Angular视图中显示它们？对于PHP，这是nl2br()。

与<div>{{ item.foobar }}</div>类似，显示的断点与数据库中的断点一样。

Answer 1

绑定HTML似乎有点不安全。 CuriousGuy建议的指令有一些额外的工程来正确地逃避HTML。

我发现使用样式规则white-space: pre-line更容易。

JSFiddle处的示例。

另见：

Answer 2

最佳解决方案：

<div class="multi_lines_text">{{ item.foobar }}</div>

<style>
.multi_lines_text { white-space: pre-line; }
</style>

ng-bind-html - 它不安全，在控制台中显示错误。

Answer 3

如果您只想添加换行符和所有其他文本以便按原样显示，则可以使用以下过滤器：

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。

Answer 4

谷歌搜索angularjs nl2br得出了这个结果：

AngularJS - Remove \n from data

即使用过滤器演示如何使用<br />替换新行的最后一个答案。将其与ng-bind-html结合使用，因为当前可能不提供不安全版本。在将它们插入数据库时，您应该将换行符转换为<br />（对我来说更有意义）。

带有换行符的AngularJS String，没有中断

4 个答案: