CODEWITHSUNDEEP
javascriptangularjs
user1469734
user1469734

Reputation: 801

AngularJS String with newlines, shown without breaks

In the database I'm saving input from a textarea, where you can add breaks. But how to show them in a Angular view? For PHP this is nl2br().

Like <div>{{ item.foobar }}</div>, with breaks shown that are saved like that in the database.

Upvotes: 47

Views: 56966

Answers (4)

Oleg
Oleg

Reputation: 23277

If you want to add line breaks only and all the rest text to show as is you can use the following filter:

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 />');
    }
});

then use it in view like this:

<div ng-bind-html="someVar | nl2br"></div>

In this case the only HTML tag that is present in the result string is <br />. All other tags will be escaped.
And don't forget to load ngSanitize module (angular-sanitize.js script).

The full working example you can find on jsFiddle.

Upvotes: 4

Sergii Semesko
Sergii Semesko

Reputation: 131

Best solution:

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

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

ng-bind-html - it's not safe way and display error in console.

Upvotes: 13

Thiago Negri
Thiago Negri

Reputation: 5351

Binding an HTML seems a bit unsafe. The directive suggested by CuriousGuy has a bit of extra engineering to correctly escape the HTML.

I find it easier to use a styling rule white-space: pre-line.

Example at JSFiddle.

See also:

Upvotes: 106

Erti-Chris Eelmaa
Erti-Chris Eelmaa

Reputation: 26268

Googling angularjs nl2br yielded this result:

AngularJS - Remove \n from data

Namely the last answer which demonstrates how to replace new lines with <br /> using a filter. Combine that with ng-bind-html, as the unsafe version might not be currently available. You should probably convert the line breaks to <br /> when inserting them to database(makes more sense to me).

Upvotes: 1

Related Questions