在AngularJS中定义第二次ng单击

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

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

一些文本

是否可以在第二次单击时将颜色更改为绿色？（蓝色->红色->绿色）

---

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

检查这是否可以接受

<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>

一些文本

---

演示：

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

.statetrue{
  color:red
}

.statefalse{
  color:blue
}

然后，您的按钮：

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

ngClass

，当给定对象时，设置属性值真实的类

注意：视图不应该包含任何业务逻辑，因为它们很难测试；它们只应与控制器交互

对此的澄清：

---

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

Hmm，比我的示例：dwy您为什么觉得需要在没有控制器的情况下执行状态更改操作？这个状态不需要存储在某个地方吗？下面提供的解决方案是可行的，但它们要求您在模板中加入相当多的逻辑，这是不美观的，会阻碍测试，并且会降低代码的可移植性。你能再详细说明一下你的用例吗？@joshdavidimiller没有用例。我只是问是否可以用酒吧的方式做foo。听起来很奇怪，有些方法可以处理2个状态，但不能处理3个状态，尽管我知道第一个红色->蓝色不是关于状态的。顺便问一下，绿色在哪里？：）对，视图不应该包含业务逻辑。那么，我甚至不应该使用第一个示例使用View将颜色从红色更改为蓝色吗？明白了！可惜我还没有投票权。我希望其他人会。

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

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