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 with extras的结果是：

Prodcut 4


with extras

Answer 1

您应该在AngularJS和ngBindHtml中使用ngSanitize标记，以便从您的范围内呈现HTML。

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

您需要使用html设置变量，例如var myVar = "Hello World!";

然后用这个渲染你的视图 

这将输出呈现的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有关，因为 会输出您想要的内容，请参阅此示例

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

Answer 2

如果您使用的是jQuery，请尝试

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

JavaScript：换行符不起作用

2 个答案: