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 中看到的，我添加了一条换行符 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!";

然后用这个渲染你的 View <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/