Angular display multiple aligned lines on one line

Question

I am trying to get a string that will be displayed on a web page through Angularjs, which can have multiple lines. Here is what I got:

<textarea ng-model="StringValue"></textarea> {{StringValue}} 

When you enter a text box:

"It

line "

You are getting:

"This is a string"

How do you get it so that the text is displayed the same as typed?

Answer 1

As already mentioned, you can use filter to achieve it.

Let me implement it for you:

 <textarea ng-model="StringValue"></textarea> <div ng-bind-html-unsafe="StringValue | breakFilter"></div> angular.module('myApp', []).filter('breakFilter', function () { return function (text) { if (text !== undefined) return text.replace(/\n/g, '<br />'); }; }); 

Answer 2

This is a problem with HTML. Not Angular. Angular records exactly what you told him.

In HTML, outside the <pre> , infinite spaces (returns, tabs, spaces, etc.) are treated as one empty space. That's why you need things like <br/> and   if you are not using the <pre> tag block.

So try this in HTML so you understand what is going on:

 <h3>Plain DIV</h3> <div> Some text here </div> <h3>Now with non-breaking spaces and line breaks</h3> <div> Some<br/> &nbsp;&nbsp;&nbsp;text<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;here<br/> </div> <h3>Now with a PRE tag</h3> <pre> Some text here </pre> 

Here is the scenario demonstrating above.

You will need to style the PRE tag with some custom class so that it looks like different text on your page, although most of the default styles for <pre> will use single-bit (fixed) width fonts such as Courier or Consolas.

It's either that you have to write a filter in Angular that handles spaces, tabs and line breaks in the correct markup .... which will be a pain to maintain.

EDIT: with the understanding above, Angular's solution (if you are not just using PRE)

Thus, the best solution, IMO, if you do not want to use the <pre> , would be to create a filter that will clean the text for you and process it with line breaks and inextricable spaces.

Something like that

 app.filter('formatText', function (){ return function(input) { if(!input) return input; var output = input //replace possible line breaks. .replace(/(\r\n|\r|\n)/g, '<br/>') //replace tabs .replace(/\t/g, '&nbsp;&nbsp;&nbsp;') //replace spaces. .replace(/ /g, '&nbsp;'); return output; }; }); 

Then, to use it, you would do something like this:

 <span ng-bind-html="foo | formatText"></span> 

It is important to note:

• You need to include the angular-sanitize.js file in your script links.
• In the module declaration, you need 'ngSanitize' :

 var app = angular.module('myApp', ['ngSanitize']); 

.. this means you can use the ng-bind-html or ng-bind-html-unsafe directives.

Below is a snippet showing usage.

Answer 3

Be careful with ng-bind-html - it is very easy to get an XSS injection.

If you want to show only your newlines, without XSS on your pages
you can use a simple css: white-space: pre rule:

 <span style="white-space: pre">{{multilinetext}}</span> 

Of course, you can make a css class for this:

 <style>.pre {white-space: pre}</style> <span class="pre">{{multilinetext}}</span> 

In addition, this method makes all visible spaces visible: leading spaces, tabs with multiple spaces, etc.

Answer 4

You can always use the PRE tag:

 <textarea ng-model="StringValue"></textarea> <pre>{{StringValue}}</pre> 

Another way:

 <textarea ng-model="StringValue"></textarea> <span ng-bind-html-unsafe="newLineToBR(StringValue)"></span> 

with controller function:

 $scope.newLineToBR = function(text) { return text ? text.replace(/\n/g, '<br />') : ''; }; 

Or, the best approach, as @sza shows, is to turn it into a filter. Below is the working one.

Answer 5

You can use a filter to convert newlines \ n to html breaks.

{{StringValue | breakFilter}}

Answer 6

The right, simple, semantically correct way to deal with your situation is to use the pre tag. These tags are specifically designed for already formatted text, which is here. Text in pre tags can be easily styled to look like plain text using CSS.

 <pre style="font: inherit">{{StringValue}}</pre> 

Answer 7

Don't ask me why, but for replace to work, I had an extra \ before \n

 input.replace(/\\n/g, '<br />')