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

164
November 30, 2017, at 06:58 AM

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!

Answer 1

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;
};
READ ALSO
Use Sass to require second class in mass

Use Sass to require second class in mass

I am currently attempting to require any element to have a second class "bootstrap" before it will apply the bootstrap css code to the element

169
Web browser not able to find other pages: [on hold]

Web browser not able to find other pages: [on hold]

From my index, when I go to other pages in my site that I am creating, it says, "can't be found, file has been moved or deleted" When I know the files haven't been moved for deleted and are still in my atom program and my external drive

175
Syncfusion controls render in the designer, but not in brower

Syncfusion controls render in the designer, but not in brower

I just added Syncfusion (Version=154460

237
Two divs with same IDs [duplicate]

Two divs with same IDs [duplicate]

This question already has an answer here:

228