HTML <br> 標簽未在AngularJS頁面上呈現

Question

我正在開發一個angularJS應用程序，當我用"<br>"標簽設置一個字符串值時，它不會呈現為HTML標記，並在頁面上打印為"AA<br>BB" 。 所以我把它改成"<br>" 也沒有渲染並打印為"AA<br>BB" 。

for(x=0; x < data.length ; x++ ){
    csf = csf + '<br> '+data[x].csf;
}

$scope.targetValue = csf;

我在HTML中使用此值：

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF:{{targetValue}} </small>
</div>

不呈現此文本並在頁面中打印標簽的原因是什么？

Answer 1

您需要使用ng-bind-html呈現HTML：

<div class="fz-display-table-cell fz-col-3 fz-main-result">
   <small>CSF: <span ng-bind-html="{{targetValue}}"></span></small>
</div>

Answer 2

你可以使用ng-bind-html ，但在角度控制器內部生成HTML並為其指定范圍值並不是一個好主意，如果你這樣做，那么你就不會使用真正的角度功能。

在這種情況下，您可以使用ng-repeat 。 看下面的代碼

http://jsfiddle.net/jigardafda/5henysda/1/

HTML

<div ng-app="app">
    <div ng-controller="tcrtl">
        <div class="fz-display-table-cell fz-col-3 fz-main-result">
            CSF:
            <div ng-repeat="item in data"> 
                <br/> {{item.csf}} 
            </div>
        </div>
    </div>
</div>

JS

var app = angular.module('app', []);

app.controller('tcrtl', function($scope){

    var data = [
        {
            csf: 'one'
        },
        {
            csf: 'two'
        }
    ]

    $scope.data = data;
});