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

而对于CCD_ 2和CCD_

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")