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