javascript - 按钮不改变背景和文本的颜色

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>