bouton de changement de style en fonction de l'état angularjs

J'ai un problème pour trouver le chemin le style d'un bouton en fonction de son état.
J'ai une question, et de répondre à quatre carreaux.

chaque carrelage est codé comme ceci:

<div class="button-default" ng-model="btn0" ng-click"evalAnswer(answer, btn0)">{{answer}}</div>
<div class="button-default" ng-model="btn1" ng-click"evalAnswer(answer, btn1)">{{answer}}</div>
<div class="button-default" ng-model="btn2" ng-click"evalAnswer(answer, btn2)">{{answer}}</div>
<div class="button-default" ng-model="btn3" ng-click"evalAnswer(answer, btn3)">{{answer}}</div>

Sur le contrôleur de côté, j'ai une fonction qui, sur cliquez, regardez la réponse et le retour de "bonnes" si la réponse est correcte, et "non" si la réponse n'est pas bonne.

Ce que je voudrais, c'est d'ajouter des boutons de style à l'intérieur de ces bonnes et non, états-unis, alors le bouton devient rouge dans le cas où la réponse est non, et en vert si c'est la bonne réponse. J'ai déjà créé la classe et j'ai seulement besoin de changer de bouton "par défaut" à la touche "bonne" ou la touche "mauvais". Aussi, Il a besoin de changer seulement les cliqué sur le bouton.

Aucune idée sur la manière de le faire?

  • Vous avez besoin d'afficher la fonction appelée par ng-click, les états dans le JS.
InformationsquelleAutor SKYnine | 2014-07-09
  1. 3

    Utilisation ng-classe directive qui devraient changer de classe selon l'une quelconque condition

    Dans votre cas, pour les deux cas, il doit être quelque chose comme:

    <div ng-class="{'true':'button-default','false':'button-unique'}[btn0.state == 'One']" 
     ng-model="btn0" 
     ng-click="evalAnswer(answer, btn0)">{{answer}}</div>

    Si vous souhaitez utiliser plusieurs cas:

    <div ng-class="{'button-default':btn0.state == 'One','button-some':btn0.state == 'Two','button-else':btn0.state == 'Three'}" 
         ng-model="btn0" 
         ng-click="evalAnswer(answer, btn0)">{{answer}}
</div>

    Démo Violon

    • à l'aide de ng-classe, pourrais-je ajouter plusieurs états? comme ceci: ng-classe="{'bouton-default': <condition>, 'bouton-bon': <condition> }" ? Également, fait état de réagir à la portée? le evalAnswer() est dans le champ d'application et donc qu'il est de mon if/else en retour bonne/non. Je vais obtenir regard plus en ng-classe
    • ajouté la démo en Violon
    • Merci, ça sonne bien. Je pense que je peux le supporter et de les intégrer. sera de retour avec la validation si cela fonctionne! merci pour votre aide
    • bien sûr, je vais tester/travailler avec elle avant que je le fais. (ne pas oublier)
    • A travaillé comme un charme. Le seul point négatif est que j'ai besoin de définir chaque état du bouton dans le champ d'application. Je wil essayez de faire de ce générique. En tout cas merci!
    InformationsquelleAutor Maxim Shoustin
  2. 1

    Il y a plusieurs façons d'accomplir ce que vous êtes désireux:

    • ng-classe utiliser pour définir des classes sur la base des conditions

    • ng-style utilisé lorsque vous ne pouvez pas définir une classe ou tout simplement besoin de changer de css simple

    Je suggère d'utiliser ng-classe si le style est compliqué ou plusieurs changements sont nécessaires dans le css. la ng-classe accepte une expression qui peut être évaluée à un tableau de noms de classe, une chaîne délimitée par des noms de classe ou un mappage de noms d'objets.

    Je pense que quelque chose comme cela devrait fonctionner pour les deux classes:

    <div ng-class="{{'someBoolean' && 'class-when-good' || 'class-when-nope'}}">{{answer}}</div>

    ou ternaire (à l'aide angulaire de la version 1.1.5)

    <div ng-class="'someBoolean' ? 'class-when-good' : 'class-when-nope'">{{answer}}</div>

    Remarque si vous avez besoin d'appliquer une classe par défaut en outre à une certaine classe c'est comment serait fait:

    <div ng-class="{{'someBoolean' && 'class-default class-when-good' || 'class-default class-when-nope'}}">{{answer}}</div>

    ou un ternaire avec défaut

    <div ng-class="'someBoolean' ? 'class-default class-when-good' : 'class-default class-when-nope'">{{answer}}</div>

    L'autre option, et celui que je pense pourrait fonctionner mieux pour votre problème est la ng-style. Puisque vous êtes seulement besoin de changer la couleur d'un bouton dans peut-être mieux de simplement changer la couleur, plutôt que de s'appliquer à différentes classes.

    <div ng-style="answer === 'good' && {'background-color' : 'green'} || 
                 answer === 'nope' && {'background-color' : 'red'}">{{answer}}</div>

    en supposant que: que le {{réponse}} est définie pour les valeurs évaluées (la réponse est bonne ou non).

    Edit:
    Pour le style conditionnel, il doit être mis dans votre contrôleur, si la réponse ne peut pas être utilisé dans le test conditionnel. Il semble que vous avez un objet btn0, et chacun de ces objets pourrait avoir une propriété (btn0.isGood) le pourrait être défini dans le evalAnswer(réponse, btn0) cliquez sur l'événement, et la modification du style.

    • c'est ma question. Comment le faire réagir en fonction de la réponse de l'etat: bon ou non? Aussi, de ce que je sais, ng-le style n'est pas de gérer plusieurs états ?
    • J'ai édité l'original de la réponse, j'espère que cette aide. Ci-dessus j'ai été en supposant que la classe par défaut devrait être appliqué indépendamment de l'état, laissez-moi savoir si ce n'est pas le cas.
    • qui semble être une super solution. Le booléen pourrait venir de la portée. Laissez $scope.isGood = false; dans mon if/else-je changer isGood selon les états, puis-je utiliser isGood en ng-classe? Vais essayer ça merci ! Et oui, vous avez raison, il y a une classe par défaut qui est utilisé avant la réponse est cochée.
    • oui, il pourrait, si vous utilisez un $champ d'application.isGood puis le someBoolean serait ng-classe="'isGood' && "classe-classe par défaut-si-bon' || 'class-classe par défaut-lorsque-nope'}}"
    • Vous pourriez tout aussi bien vérifier la réponse === bon
    • Avez-vous besoin d'avoir à la fois la valeur par défaut de la classe et de la bonne classe appliquée lorsque la condition est bonne?
    • non, un seul à la fois. J'ai quatre réponses possibles, une seule est correcte. Je veux juste "express" si la réponse est bonne ou pas lorsque l'on clique sur un des 4 boutons en changeant de style. Les 3 autres bouton de rester dans le style par défaut de tout le cliqué sur l'un devient verte si la réponse est bonne, et rouge si pas. Lorsque la bonne réponse est sélectionnée, les questions/réponses des changements.
    • ok, je crois vraiment que la la ng-style est votre meilleure option.
    • J'ai donc fait une réduction de test et voici mes résultats: html '<div ng-model="btn0" ng-classe="{{'isGood' && "défaut de bon", | | par défaut "mauvais"}}" ng-click="evalAnswer(opt2)">{{opt1}}</div>' controller '$champ d'application.opt1 = "bonjour"; $champ d'application.réponse = "salut"; $champ d'application.isGood = false; $champ d'application.evalAnswer = function(rép) { if(rép == $champ d'application.reponse){ console.log("droit"); $champ d'application.isGood = true; } else{ console.log("mauvais"); $champ d'application.isGood = false; } }' conditl avec retour par défaut erreur angulaire ternaire retourner le bon (fond vert) classe directement.
    • Sur le ng-style: où est le bien et non, ça vient? mon contrôleur? comment puis-je vérifier l'état de la réponse ? J'ai du mal à comprendre la logique ici
    • le test conditionnel provient de votre contrôleur, vous aurez très probablement d'une propriété sur chaque bouton est réglé à une valeur Booléenne pour de bon/nope. Je vais faire quelques modifications pour répondre.
    • Si vous voulez un peu plus détaillée aider à poster un plunker ou violon et je peux vous aider davantage.
    • Maxim réponse a parfaitement fonctionné au sein de ma fonction réelle. Cependant, je suis très intéressé à en apprendre au sujet de votre méthode. Je ne peux pas faire de violon pour l'instant, mais je vais vous mettre à jour au plus vite si vous n'avez pas l'esprit de l'enseignement de moi.

    InformationsquelleAutor Jared Reeves