私は今のところそれ以下のコードを持っているAngularjs

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> 

ステータスは、Approved、Rejected、In progress、No Actionです。 プレーンテキストの代わりにこれらのステータスを表すアイコンを表示したいと思います。 誰かが解決策を考えることができる誰ですか？ ありがとう！

Answer 1

あなたのステータスフィールドはどれですか？私はticket.ApproverOne/ticket.ApproverTwo/ticket.ApproverThreeが対応するステータスを持つと仮定します。仮定して、あなたはコントローラ内の機能とそれを達成することができます：

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

コントローラー：

$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; 
}; 

Answer 2

カルヤンを与えたソリューションは、素晴らしいと少ないコードです。コントローラでは

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

：HTMLで ：私はちょうど私が見つけた別の解決策を投稿したかった

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