[英]HTML <br> tag is not rendering on page with AngularJS
I'm developing an angularJS application and when I set a String value with "<br>"
tag, it is not rendering as HTML tag and it prints as "AA<br>BB"
on the page. 我正在开发一个angularJS应用程序,当我用
"<br>"
标签设置一个字符串值时,它不会呈现为HTML标记,并在页面上打印为"AA<br>BB"
。 So I change it to "<br>"
所以我把它改成
"<br>"
that is also not rendered and print as "AA<br>BB"
. 也没有渲染并打印为
"AA<br>BB"
。
for(x=0; x < data.length ; x++ ){
csf = csf + '<br> '+data[x].csf;
}
$scope.targetValue = csf;
and I use this value in HTML as : 我在HTML中使用此值:
<div class="fz-display-table-cell fz-col-3 fz-main-result">
<small>CSF:{{targetValue}} </small>
</div>
what is the reason for not rendering this text and print the tag in page? 不呈现此文本并在页面中打印标签的原因是什么?
You need to use ng-bind-html
to render HTML: 您需要使用
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>
You can use ng-bind-html
for this but its not a good idea to generate HTML inside controller in angular and assign it a scope value, if you are doing so then you are not using true power of angular. 你可以使用
ng-bind-html
,但在角度控制器内部生成HTML并为其指定范围值并不是一个好主意,如果你这样做,那么你就不会使用真正的角度功能。
In this case, instead, you can use ng-repeat
. 在这种情况下,您可以使用
ng-repeat
。 see the below code 看下面的代码
http://jsfiddle.net/jigardafda/5henysda/1/ http://jsfiddle.net/jigardafda/5henysda/1/
HTML 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 JS
var app = angular.module('app', []);
app.controller('tcrtl', function($scope){
var data = [
{
csf: 'one'
},
{
csf: 'two'
}
]
$scope.data = data;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.