我有一个状态字段，想显示一个图标而不是数据库中的值。最终，这将在表行的ng-repeat中进行。我对作用域函数进行了编码，以便在基于$ scope值时返回图标（根据需要着色），但它显示的是实际的HTML代码而不是图标。我尝试了使用3个花括号的Handlebar技巧，但是Angular却没有。
我该如何返回图标而不是HTML，或者Angular是否有更好的方法来完成“动态”图标。
这是我的控制器：
var app = angular.module('app',[]);
app.controller('MainController', function($scope){
$scope.getStatus = function(val){
switch(val){
case 'I':
return '<span class="glyphicon glyphicon-wrench" tooltip="In_Progress" style="color: #000099;"></span>';
break;
case 'R':
return '<span class="glyphicon glyphicon-share-alt" tooltip="Recommended"></span>';
break;
case 'A':
return '<span class="glyphicon glyphicon-thumbs-up" tooltip="Approved" style="color: #009900;"></span>';
break;
case 'D':
return '<span class="glyphicon glyphicon-thumbs-down" tooltip="Denied" style="color: #990000;"></span>';
break;
case 'W':
return '<span class="glyphicon glyphicon-remove-sign" tooltip="Withdrawn" style="color: #E0A02D;"></span>';
break;
case 'P':
return '<span class="glyphicon glyphicon-ok" tooltip="Paid" style="color: #009900;"></span>';
break;
}
};
}); // end MainController
和我的HTML
<body ng-controller="MainController">
<table style="width:50%; margin:0 auto;">
<tr>
<td style="text-align:center;">
{{ getStatus("I") }}
</td>
</tr>
</table>
</body>
我也有一个Plunker，但是plunker并没有真正地制作glyphicons。
我相信您需要将绑定从默认绑定更改为html绑定，以免逃脱。
从：
<body ng-controller="MainController">
<table style="width:50%; margin:0 auto;">
<tr>
<td style="text-align:center;">
{{ getStatus("I") }}
</td>
</tr>
</table>
</body>
到：
<body ng-controller="MainController">
<table style="width:50%; margin:0 auto;">
<tr>
<td style="text-align:center;" ng-bind-html="getStatus('I')"></td>
</tr>
</table>
</body>
您还需要在html中添加ngSanitize：
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
并在您的应用程序需求中：
var app = angular.module('app',['ngSanitize']);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句