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

HTML用于AngularJS的页面上没有渲染HTML标签

2 个答案: