change button style according to state angularjs - angularjs

Question

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?

Answer 1

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

Answer 2

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.