有条件地改变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;}