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