按钮不会更改背景和文本的颜色

Question

我显然对此代码做错了。 不知道是什么，但它确实出错了。

我想要它，以便当您单击按钮的颜色时背景和文本会更改字体，目前没有

<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

只需将范围变量传递给ng-class

 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

如果您使用ng-class，则不要放置表达式{{}}，而直接使用范围对象。 因为它的默认指令为angular，所以他们不希望表达式{{}}

否则以回答我的方式使用带有表达式的类

<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

由于您还标记了JQuery ...这对我有用：

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

这是JSFiddle演示 :)