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

您应该在AngularJS和ngSanitize中使用ngBindHtml标记，以便从作用域渲染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")