Условно изменение цвета элемента angularjs?

Question

Im все еще довольно новый для 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 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;}