Question

以下是使用AngularJS单击按钮文本颜色的代码。

<button ng-class="myClass"
   ng-click="myClass='red'"
   ng-init="myClass='blue'">
some text
</button>

http://jsfiddle.net/rLkb5/2/

第二次点击是否可以将颜色更改为绿色？（蓝 - ＆GT;红 - ＆GT;绿色）

我的直觉告诉我，没有控制器+自定义JS代码是不可能的，但可能有一种简单的方法。

Answer 1

function MyCtrl($scope) {
  $scope.active = false;
  $scope.toggleActive = function () {
    $scope.active = !$scope.active; 
 };
}

<div ng-class="{red: !active, green: active}" ng-click="toggleActive()"></div>

ngClass，当给定一个对象时，设置哪些属性值是真实的类。

注意：View不应包含任何业务逻辑，因为它们很难测试;他们只应该与控制器互动。

澄清：

您不应该做的是，直接从视图中更改范围中的属性。让控制器中的函数充当包装器，为您完成。 View可以根据范围属性更改自身的呈现方式，并调用控制器中的函数来操作数据。此外，控制器不应该知道 如何显示数据，它应该表现得根本就没有视图（事实上，视图应该是可替换的）。您想要应用哪个css类不是您的控制器应该知道/决定的。

Answer 2

检查这是否可以接受

<div ng-app>
    <button ng-class="myClass" ng-click="counter = counter + 1; myClass=classes[counter % 3]" ng-init="myClass='blue'; classes=['blue', 'red', 'green']; counter=0">some text</button>
</div>

演示：Fiddle

Answer 3

可能有更好的方法，但如果你重命名你的课程：

.statetrue{
  color:red
}

.statefalse{
  color:blue
}

然后，你的按钮：

<button ng-class="'state' + myClass" ng-click="myClass = !myClass"  ng-init="myClass=true">

在AngularJS中定义第二次ng-click

3 个答案: