JavaScript: Line break not working

Question

I have several string variables:

var products = [
    {
        name: 'Product_1',
        templateUrl: 'product_1'
    },
    {
        name: 'Product_2',
        templateUrl: 'product_2'
    },
    {
        name: 'Product_3',
        templateUrl: 'product_3'
    },
    {
        name: 'Product_4 \n with extras',
        templateUrl: 'product_4'
    }
];

As you can see in product 4 i added a linebrea name: 'Product_4 \n with extras',

when i open up my html page:

<ion-list>
    <ion-item class="item-icon-right" ng-repeat="product in products" ui-sref="app.{{product.templateUrl}}" >
        {{product.name}}
    </ion-item>
</ion-list>

There is no line break. the output is:

Product_1
Product_2
Product_3
Product_4 with extras

but it should be:

Product_1
Product_2
Product_3
Product_4 
with extras

Why isnt the line break working?

ng-bind-html="product.name"

does not work as intented. As i mentioned i want the result to be:

Product_4
with extras

but with ng-bind-html="product.name" and Product_4 with extras the result is:

Prodcut 4


with extras

This has nothing to do with JavaScript. In HTML whitespace such as `\n` is usually ignored. — Sergiu Paraschiv, Jun 23 '15 at 14:06
possible duplicate of [how can i preserve new lines in an angular partial](http://stackoverflow.com/questions/15449325/how-can-i-preserve-new-lines-in-an-angular-partial) — Corey Ogburn, Jun 23 '15 at 14:08
Also replacing `\n` with `
` won't work straightforward.That's because `ng-bind="suff"` - what `{{stuff}}` gets turned into - does not bind HTML. You need to use `ng-bind-html` explicitly. You'll have troubles with `$sce` too then. — Sergiu Paraschiv, Jun 23 '15 at 14:08
`ng-bind="suff"` definetely does something but not a simple line break. there now is a huuuuugge gap between those words. — Mulgard, Jun 23 '15 at 14:14

Robert W. Hunter · Accepted Answer · 2015-06-23T14:44:44.567

2

You should use ngBindHtml tag in AngularJS and ngSanitize in order to render HTML from your scope.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

You need to set the variable with html like this var myVar = "Hello World!";

And then render your view with this 

This will output rendered HTML instead of raw text.

var products = [
    {
        name: 'Product_1',
        templateUrl: 'product_1'
    },
    {
        name: 'Product_2',
        templateUrl: 'product_2'
    },
    {
        name: 'Product_3',
        templateUrl: 'product_3'
    },
    {
        name: 'Product_4 <br/> with extras',
        templateUrl: 'product_4'
    }
];

HTML

<ion-list>
    <ion-item class="item-icon-right" ng-repeat="product in products" ui-sref="app.{{product.templateUrl}}" >
        <p ng-bind-html="product.name"></p>
    </ion-item>
</ion-list>

Of course you can use other tags than p

The problem you tell us about the multiple break lines, may be related to CSS because   will output exactly what you want, see this example

https://jsfiddle.net/8019ymgj/1/

edited Jun 23 '15 at 14:44

answered Jun 23 '15 at 14:08

Robert W. Hunter

2,895
7
35
73

What's `{%raw%}`? No such thing in AngularJS. – Sergiu Paraschiv Jun 23 '15 at 14:10
no. result is: `{%raw%} Product_4
with extras {%endraw%}` – Mulgard Jun 23 '15 at 14:11
Sorry I've messed up with two different questions and answered here the other one, let me update my answer. – Robert W. Hunter Jun 23 '15 at 14:12
yes. but see my edit pls. the result is not as i want it to be. – Mulgard Jun 23 '15 at 14:19

score -2 · Answer 2 · edited Jun 23 '15 at 17:44

-2

If you are using jQuery, try

$("#doWhatNow").html("product 4 <br> with extras")

edited Jun 23 '15 at 17:44

Leo Correa

19,131
2
53
71

answered Jun 23 '15 at 14:09

Dejan Biljecki

595
1
5
26

4

Never, ever, do it with jQuery in angular (not my downvote either). Edit : you should use ``
`` – Deblaton Jean-Philippe Jun 23 '15 at 14:11

JavaScript: Line break not working

2 Answers2