How to change an icon (Font Awesome) in the HTML based on results got from Angularjs

Question

I have the code below that for now is returning the status of ApproverOne, ApproverTwo and ApproverThree in text format:

<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>

The status are: Approved, Rejected, In progress and No Action. I want to show icons representing these status instead of plain text. Anyone there who can think of a solution? Thanks!

This seems like more of a CSS question than an AngularJS one. You should look into using the `::before` pseudo element to inject content, the FontAwesome icon in this case. — JC Ford, Nov 29 '17 at 19:35
What about adding empty `i` tags with general font awesome class and add classes of icons that you need? inside every td or wherever you need the icon, add `` So for example you can pass `$scope.icon1 = "fa-check"` and the icon will become check icon ... — user8672473, Nov 29 '17 at 19:52
Use the `ng-class` directive to control desired class of the icon. See [AngularJS `ng-class` Directive API Reference](https://docs.angularjs.org/api/ng/directive/ngClass). — georgeawg, Nov 29 '17 at 20:44
Possible duplicate of [What is the best way to conditionally apply a class?](https://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class/8309832#8309832). — georgeawg, Nov 29 '17 at 20:55
Thank you guys! Everything was really helpful! I found a different solution. In the controller I applied the html tags to the variables I gave above and used ng-bind-html and then I could see the icons. Because what happens with angular is that it won't convert the html tags unless you use the bind-html. — lumayara, Dec 01 '17 at 19:02

Kalyan · Accepted Answer · 2017-11-30T00:54:53.683

You didn't tell which is your status field. I assume ticket.ApproverOne/ticket.ApproverTwo/ticket.ApproverThree will have the corresponding status. With that assumption, You can achieve it with a function in a 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;
};

That's a different solution from the one I found but it is very cool too and simpler! Thank you @Kalyan! — lumayara, Dec 01 '17 at 19:03

score 0 · Answer 2 · answered Dec 01 '17 at 19:14

The solution Kalyan gave is great and with less code. I just wanted to post another solution I found: In the HTML:

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

In the controller:

thumbsdown = "<i class='fa fa-thumbs-o-down' aria-hidden='true' title='Rejected'></i>";
check = "<i class='fa fa-check' aria-hidden='true' title='Approved'></i>";
progress = "<i class='fa fa-hourglass-end' aria-hidden='true' title='In progress'></i>";
sentBack = "<i class='fa fa-reply' aria-hidden='true' title='Sent back'></i>";
noAction = "N/A";

    //Approver One
    if(approverOneAction){
       if(approverOneAction == "In progress"){
           approverOneAction = progress;
       }
       if (approverOneAction == "Approved") {
           approverOneAction = check;
       }
       if (approverOneAction == "Rejected") {
           approverOneAction = thumbsdown;
       }
       if (approverOneAction == "Sent back") {
           approverOneAction = sentBack;
       }
    }else{
          approverOneAction = noAction;
       }

    //Approver 2
    if (approverTwoAction) {
       if(approverTwoAction == "In progress"){
          approverTwoAction = progress;
       }
       if (approverTwoAction == "Approved") {
          approverTwoAction = check;
       }
       if (approverTwoAction == "Rejected") {
          approverTwoAction = thumbsdown;
       }
       if (approverTwoAction == "Sent back") {
          approverTwoAction = sentBack;
       }
    }else {
       approverTwoAction = noAction;
    }

    //Approver 3
    if (approverThreeAction) {
        if (approverThreeAction == "In progress") {
            approverThreeAction = progress;
        }
        if (approverThreeAction == "Approved") {
           approverThreeAction = check;
        }
        if (approverThreeAction == "Rejected") {
           approverThreeAction = thumbsdown;
        }
        if (approverThreeAction == "Sent back") {
           approverThreeAction = sentBack;
        }
    } else {
        approverThreeAction = noAction;
    }

How to change an icon (Font Awesome) in the HTML based on results got from Angularjs

2 Answers2