有條件地改變angularjs元素的顏色？

Question

我還是AngularJS的新手。我試圖改變表格元素的顏色，使其黃色，如果用戶投票選擇。

<div ng-show="poll.userVoted"> 
    <table class="result-table"> 
     <tr ng-repeat="choice in poll.choices"> 
      <td>{{choice.text}}</td> 
      <td> 
      <table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right"> 
       <tr> 

         <td>{{choice.votes.length}}</td> 
       </tr> 
      </table> 
      <table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right"> 
       <tr> 

        <td>{{choice.votes.length}}</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table> 

Answer 1

這是通過使用納克級完成。

使用納克級上的TD是這樣的：

<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td> 

，將放在CSS類yellowstyle的項目時你的病情是真實的。

而且在你的榜樣：

<table class="result-table"> 
    <tr ng-repeat="choice in poll.choices"> 
    <td>{{choice.text}}</td> 
    <td> 
     <table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right"> 
     <tr> 
      <td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

與具有style.css的文件：

.yellowstyle {background-color: yellow;} 
.lightbluestyle {background-color: lightblue;}