有条不紊地改变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

这是通过使用ng-class完成的。

在你的td上使用ng-class：

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

当条件为真时，将把css类黄色风格放在项目上。

在你的例子中：

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