gpt4 book ai didi

javascript - 无法让 Angular 过滤器显示 Html 实体

转载 作者:行者123 更新时间:2023-11-28 07:01:08 25 4
gpt4 key购买 nike

我正在尝试使用 Angular 在我的 MVC View 中显示“True”值的绿色复选标记和“False 值”的红十字。使用过滤器,我可以显示 unicode 检查 (u+2713) 和十字 ( u+2718),但他们想要一个“绿色”检查和一个“红色”十字。我在我的页面上包含了 angular-sanitize.js 并尝试使用 ng-bind-html-unsafe 指令,当我执行该字段时空白。

谁能告诉我我在这里缺少什么?

这是我的 HTML 页面:

<script src="~/Scripts/app/AccordionCtrl.js"></script>
<script src="~/Scripts/app/checklist-model.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<div ng-app="myModule" ng-controller="AccordionCtrl">

<table class="table">
<thead style="background-color:#0e438d; color:white">
<tr>
<td>Company Name</td>
<td>City</td>
<td>State</td>
<td>System ID</td>
<td>Releast Status</td>
<td>Training Tracker</td>
<td>SSQ Complete</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="contractor in contractors">
<td>{{contractor.vchCompanyName}}</td>
<td>{{contractor.vchOprCity}}</td>
<td>{{contractor.vchOprStateID}}</td>
<td>{{contractor.CompanyID}}</td>
<td>{{contractor.ReleaseStatus}}</td>
@*<td>{{contractor.TrainingTracker|applyMarks}}</td>*@
<td><span ng-bind-html-unsafe="contractor.TrainingTracker | applyMarks"></span></td>
<td>{{contractor.SSQComplete|applyMarks}}</td>
</tr>
<tr>
<td>&#10004</td>
</tr>
</tbody>

</table>
</div>
</div>

这是我 Controller 中的过滤器代码:

app.filter("applyMarks", function(){
return function(input){
if(input == true){
//return '\u2713';
return '&#10004';
}
else
{
return '\u2718'
}
};

最佳答案

ng-bind-html-unsafe 自 Angular 1.2 版本起已被弃用。

您需要使用 $sce 来清理您的 html。

标记

ng-bind-html="contractor.TrainingTracker | applyMarks | trustedhtml"

代码

app.filter('trustedhtml', function($sce) { 
return $sce.trustAsHtml;
});

关于javascript - 无法让 Angular 过滤器显示 Html 实体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32125964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com