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

只需将范围变量传递给| empresa | data | |---------|------| | 4 | d | | 5 | e |，如

＆＃13;

ng-class

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 2

如果您使用ng-class，请不要使用表达式{{}}直接使用范围对象。因为它的默认指令是角度，所以他们并不期望表达式{{}}

否则按照我回答的方式使用带表达式的类

<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'));
});

Here is the JSFiddle demo：）

按钮不会改变背景和文字的颜色

3 个答案: