有条件地更改angularjs元素的颜色？ [英] Conditionally change color of angularjs element?

问题描述

我对AngularJS还是很陌生。我试图更改表格元素的颜色，以便在用户对此选项进行投票时使其变为黄色。

Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.

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

推荐答案

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

This is done by using ng-class.

像这样在您的td上使用ng-class：

Use ng-class on your td like this:

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

当您的条件为true时，将在该项目上添加css类yellowstyle。

that will put the css class yellowstyle on the item when your condition is true.

在您的示例中：

<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文件，该文件具有：

with a style.css file that has:

.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}

这篇关于有条件地更改angularjs元素的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！