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