Conditionnellement changer la couleur de angularjs élément?

Je suis encore assez nouveau pour AngularJS. Im essayant de changer la couleur de l'élément de la table de sorte que son jaune si l'utilisateur a voté sur ce choix.

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

Conditionnellement changer la couleur de angularjs élément?

quelle est l'erreur?
Vous pouvez essayer quelque chose comme cela, si je comprends bien votre question, le titre correctement - plnkr.co/modifier/jeszGorMQmLiqhtWDt94?p=preview
merci je vais prob faire quelque chose comme cela. j'ai juste pensé que je pourrais le faire dans les balises en quelque sorte sans faire une fonction pour cela.

OriginalL'auteur jsky | 2014-09-29

  1. 7

    Ceci est fait en utilisant ng-classe.

    Utilisation ng-classe sur votre td comme ceci:

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

    qui va mettre la classe css yellowstyle sur l'élément lorsque votre condition est vraie.

    Et dans votre exemple:

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

    avec un style.fichier css a:

    .yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}
    cela me donne une erreur de syntaxe: Error: Syntax Error: Token ':' is an unexpected token at column 12 of the expression [yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text] starting at [: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text].
    Désolé j'ai oublié le {} en ng-classe, fixe, essayez à nouveau
    presto! merci, monsieur.

    OriginalL'auteur Rickard Staaf