2

I have a problem finding the way to style a button according to it's state. I have a question, and four answer tiles.

each tiles is coded like this:

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

On the controller side I have a function that, on click, look at the answer and return "good" if the answer is correct, and "nope" if the answer is not good.

What I would like is to add button styling within these good and nope states so the button become red in case the answer is nope, and green if it's the good answer. I already created the class and I only need to change "button-default" to "button-good" or "button-wrong". Also, It needs to change only the clicked button.

Any idea on the way to do that?

Improve this question
1
  • You need to post the function called by ng-click, the states in the JS. Commented Jul 9, 2014 at 13:36

2 Answers 2

Reset to default
3

Use ng-class directive that should switch class according to any condition

In your case for two cases it should be something like:

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

If you want to use multiple cases:

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

Demo Fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

using ng-class, could I add several states? like this: ng-class="{'button-default': <condition>, 'button-good': <condition> }" ? Also, does condition react to the scope? the evalAnswer() is in the scope and so it my if/else statement returning good/nope. I'll get deeper look into ng-class
@SKYnine added demo in Fiddle
Thanks, that sounds good. I think I can handle this and integrate it. will return with validation if that works! thanks for your help
Worked like a charm. The only negative point is that I need to define each button state within the scope. I wil try to make this generic. Anyway thanks!
1

There are multiple ways to accomplish what you are wanting:

  • ng-class use to set classes based on conditions

  • ng-style used when you can not define a class or just need to change simple css

I suggest using ng-class if the styling is complicated or multiple changes are needed in the css. the ng-class accepts an expression that can be evaluated to an array of class names, a string of delimited class names or a map of object names.

I think something like this should work for two classes:

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

or a ternary (using angular version above 1.1.5)

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

Note if you need to apply a default class in addition to a conditional class this is how to would be done:

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

or a ternary with default

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

The other option and the one I think might work best for your problem is the ng-style. Since you are only needing to change the button color in might be better to simply change that color rather then apply different classes.

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

assuming: that the {{answer}} is set to the values evaluated (answer is good or nope).

Edit: For the style conditional it needs to be set in your controller, if answer can not be used in the conditional test. It looks like you have an object btn0, and each of those objects could have a property (btn0.isGood) the could be set in the evalAnswer(answer, btn0) click event and would result in the changing the style.

Improve this answer

12 Comments

that's my question. How to make it react based on answer's state: good or nope? Also, from what I know, ng-style doesn't handle multiple states ?
I edited the original answer, I hope this helps. In the above I was assuming that the default class should be applied regardless of condition, let me know if this is not the case.
that sounds to be an awesome solution. Does the boolean could come from the scope. Let set $scope.isGood = false; in my if/else I change isGood according to states and then I use isGood in ng-class? Will try this out thanks ! And yes, you're right, there is a default class which is used before the answer is checked.
yes it could, if you use a $scope.isGood then the someBoolean would be ng-class="'isGood' && 'class-default class-when-good' || 'class-default class-when-nope'}}"
Do you need to have both the default class and the good class applied when the condition is good?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.