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;
});