Question

我想知道通过css向<td>项添加图标的可能性。目前在我的表格中（使用角度），如果某个值（得分）大于75％，我会将表格中的行设为红色。这有点具有侵入性，因为我在页面的其他地方使用font-awesome我可能会尝试在分数旁边添加一个明星。要更改为红色，我使用ng-style并调用评估分数的方法，然后相应地设置css。

<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
    <td>{{$index + 1}} </td>
    <td>{{item.name.replace("_"," ")}}</td>
    <td>{{item.score.toFixed(3)}}</td>
</tr>

这是js中的setColor()方法：

$scope.setColor = function(score){
    if (score >= 75){
        return { background: '#FF4747', color : '#FFFFFF' }
    }else if( score >= 50 && score < 75){
        return {background : '#FFFF47' }
    }
};

我想知道可能使用ng-show但我不知道你是否可以在ng-show内调用方法。喜欢秀，如果它超过75％有点事吗？理想情况下，<i class="fa fa-star"></i>会在{{item.score.toFixed(3)}}旁边显示大于75％的内容。

最佳解决方案是什么？提前谢谢。

Answer 1

如果你看一下fontawesome styleshet https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css，你就可以选出.fa-star部分......

.fa-star:before {
  content: "\f005";
}

你可以在你的td上使用它，以太类或直接使用它。

 td {
    position: relative;
font-family: FontAwesome;
    }
        td:before /* OR */ td.class:before {
          content: "\f005";
        }

Answer 2

您可以使用ng-show指令实现所需的功能，但更好的选择是使用ng-class指令，如下所示

ng-class="{className:score > 75%}"

其中className将替换为css类的名称

通过CSS向html添加图标

2 个答案: