我仍然是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>
答案 0 :(得分:7)
这是通过使用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;}