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.
-
This could also be used to ask/answer the same question about with line breaks(\n) instead of just html breaks(<br>).discodane– discodane2017-03-24 19:55:35 +00:00Commented Mar 24, 2017 at 19:55
Add a comment
|
4 Answers
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:
5 Comments
Luis Masuelli
pre-line! you're THE boss.
Eduard Luca
What is the browser compatibility on this one?
Al-Mothafar
Super ! very nice, easy and clean.
Ben
this is the correct answer, would be better than including html code!
Harrison O
Using the style
white-space: pre-line is the simplest solution, i think.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.
Comments
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.
3 Comments
CWSpear
Any particular reason you don't just do something like
return (input || '').replace(/\n/g, '<br>');?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).
