angularjs - 在 AngularJS 中定义第二个 ng-click

Question

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

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

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

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

我的直觉告诉我，没有控制器+自定义 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 可以根据范围属性更改自身的呈现方式，并调用控制器中的函数来操作数据。此外，控制器根本不应该知道你想如何显示数据，它应该表现得像根本没有视图（事实上，视图应该是可替换的）。您要应用哪个 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>

演示：小提琴

Answer 3

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

.statetrue{
  color:red
}

.statefalse{
  color:blue
}

然后，您的按钮：

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