angularjs - AngularJS で 2 回目の ng-click を定義する

Question

AngularJS を使用してボタンのテキストの色をクリックするコードを次に示します。

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

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

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は、オブジェクトが与えられると、プロパティ値が真であるクラスを設定します。

注: ビューはテストが難しいため、ビジネス ロジックを含めないでください。コントローラーとのみ対話する必要があります。

それについての説明：

すべきでないことは、スコープ内のプロパティをビューから直接変更することです。コントローラーの関数を、それを行うラッパーとして機能させます。ビューは、スコープのプロパティに応じてレンダリング方法を変更し、コントローラーで関数を呼び出してデータを操作できます。また、コントローラーは、データをどのように表示したいかをまったく認識してはならず、ビューがまったくないように動作する必要があります (実際、ビューは交換可能である必要があります)。どの CSS クラスを適用するかは、コントローラーが認識/決定する必要があるものではありません。

Answer 2

おそらくもっと良い方法がありますが、クラスの名前を変更した場合:

.statetrue{
  color:red
}

.statefalse{
  color:blue
}

次に、あなたのボタン：

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

Answer 3

これが受け入れられるかどうかを確認します

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

デモ:フィドル