How can I implement a style switcher with AngularJS? - angularjs

Question

I have an idea to change the theme on my web page. Here is my CSS that I am using:
html.darkBlue {
.block-content.light-tint-bg {
background: #fefefe;
border: 1px solid #777777;
color: #7b7b7b;
}
}
html.black {
.block-content.light-tint-bg {
background: #333333;
border: 1px solid #111111;
}
}
The idea is that I add a class to the HTML and depending on the class that is used it will use one theme or another.
But with Angular how could I make it switch? I was thinking of having an address kind of link but I am not sure how to switch between two classes?

Answer 1

I use a similar approach to #Davin Tryon, except like like this:
In the controller:
$scope.applied = false;
Then in the ng-class
ng-class="{true: 'applied', false: 'notApplied'}[applied]"
So based on the value of applied being true or false, it will apply the value of the property in the expression applied when true, and notApplied when false.
Edit:
Ok based on your comment:
http://jsfiddle.net/muLPT/
<div ng-app ng-class="background">
Hello World
<input type="button" ng-click="background = 'black'" value="black">
<input type="button" ng-click="background = 'red'" value="red">
<input type="button" ng-click="background = 'blue'" value="blue">
</div>
.black {
background: black;
}
.red {
background: red;
}
.blue {
background: blue;
}
This should do what you want.
Basically just changes the value of 'background' class to what ever value was clicked.
The sample is done on a div since I can't demo it on html from jdfiddle. Should work the same if its applied to html

Answer 2

You can use ng-class. Here are the docs.
ng-class allows you to resolve the class using an expression.
The example here shows usage:
<p ng-class="{applied: 1 == 1, notApplied: 1 == 0}">Example</p>
The expression 1 == 1 will resolve to true and the class 'applied' will be added to the class attribute.
In order to handle a click and toggle the class, you would create a scoped variable. For example this will toggle a clicked field that will add/remove the class:
<div ng-click="clicked = !clicked" ng-class="{black: clicked, darkBlue: !clicked}"></div>