javascript - 如何根据从 Angularjs 获得的结果更改 HTML 中的图标(Font Awesome)

Question

我有下面的代码，目前以文本格式返回 ApproverOne、ApproverTwo 和 ApproverThree 的状态:

<tr ng-repeat="ticket in requests">
    <td><a href="{{ticket.Link}}">{{ticket.Id}}</a></td>
    <td class="action{{ticket.ApproverOne}}">{{ticket.ApproverOne}}</td>
    <td class="action{{ticket.ApproverTwo}}">{{ticket.ApproverTwo}}</td>
    <td class="action{{ticket.ApproverThree}}">{{ticket.ApproverThree}}</td>      
</tr>

状态有:已批准、已拒绝、进行中和无操作。我想显示代表这些状态的图标而不是纯文本。有谁能想到解决办法吗？谢谢!

Answer 1

您没有说明哪个是您的状态字段。我假设 ticket.ApproverOne/ticket.ApproverTwo/ticket.ApproverThree 将具有相应的状态。有了这个假设，您可以通过 Controller 中的函数实现它:

<tr ng-repeat="ticket in requests">
    <td><a href="{{ticket.Link}}">{{ticket.Id}}</a></td>
    <td class="action{{ticket.ApproverOne}}"><i class="{{getIcon(ticket.ApproverOne)}}"></i></td>
    <td class="action{{ticket.ApproverTwo}}"><i class="{{getIcon(ticket.ApproverTwo)}}"></i></td>
    <td class="action{{ticket.ApproverThree}}"><i class="{{getIcon(ticket.ApproverThree)}}"></i></td>      
</tr>

Controller :

$scope.getIcon = function(status)
{
   var faIcon = "";
   switch(status){
      case "Approved":
         faIcon = "fa....."; // Approved Icon here
         break;
      case "Rejected":
         faIcon = "fa....."; //Rejected Icon
         break;
      default:
         faIcon = "fa..."; //Status None
         break;
   };
   return faIcon;
};