JavaScript: разрыв строки не работает

Question

У меня есть несколько строковых переменных:

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' 
    } 
]; 

Как вы можете видеть в продукте 4 я добавил linebrea name: 'Product_4 \n with extras',

, когда я открываю мою HTML страницу:

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

Нет разрыва строки. выход:

Product_1 
Product_2 
Product_3 
Product_4 with extras 

, но это должно быть:

Product_1 
Product_2 
Product_3 
Product_4 
with extras 

Почему разве разрыв линии работает?

ng-bind-html="product.name" 

не работает как намеренный. Как я уже говорил, я хочу, чтобы результат:

Product_4 
with extras 

но с ng-bind-html="product.name" и Product_4 <br /> with extras результат:

Prodcut 4 


with extras 

Answer 1

Вы должны использовать ngBindHtml тег в AngularJS и ngSanitize для того, чтобы сделать HTML из вашей сферы ,

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

Вам нужно установить переменную с HTML, как этот var myVar = "Hello<br/>World!";

А затем сделать ваш взгляд с этим <p ng-bind-html="myVar"></p>

Это будет выводить визуализации HTML вместо сырого текста.

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> 

Конечно, вы можете использовать другие теги, чем p

Проблема вы рассказать нам о нескольких прерывистых линий, могут быть связаны с CSS, поскольку <br/> будет выводить именно то, что см. этот пример.

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

Answer 2

Если вы используете JQuery, попробуйте

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