buttons not changing colour of background and text

Question

I'm apparently doing something wrong with this code. Not sure what but its going really wrong.

I'm wanting it so that when you click a button the colour the background and the text changes font, Currently not happening

<style>
.red { background-color: red; }
.red p { font-style: normal; }

.blue { background-color: blue; }
.blue p { font-style: italic; }

.green { background-color: green; }
.green p { font-style: oblique;}
</style>
<div ng-class={{colorScheme}}>

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

Answer 1

Just pass the scope variable to ng-class like

 var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) {}) 

 .red { background-color: red; } .red p { font-style: normal; } .blue { background-color: blue; } .blue p { font-style: italic; } .green { background-color: green; } .green p { font-style: oblique; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app" ng-controller="AppController"> <div ng-class="colorScheme"> <button ng-click="colorScheme = 'red'">ColorScheme Red</button> <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button> <button ng-click="colorScheme = 'green'">ColorScheme Green</button> <p>Awesome content</p> </div> </div> 

Answer 2

If you use ng-class don't put expressions{{}} just use directly the scope object. Because its default directive in angular they didn't expect the expressions {{}}

Otherwise Use class with expression in the way of I am answered

<div class="{{colorScheme}}">

    <button ng-click="colorScheme = 'red'">ColorScheme Red</button>
    <button ng-click="colorScheme = 'blue'">ColorScheme Blue</button>
    <button ng-click="colorScheme = 'green'">ColorScheme Green</button>

    <p>Awesome content</p>

</div>

Answer 3

Since you also tagged JQuery... this works for me:

$("button").click(function(){
    $(this).parent().removeClass().addClass($(this).attr('color'));
});

Here is the JSFiddle demo :)