ng-clickに基づいてCSSスタイルを切り替える

Question

ng-clickイベントに基づいてCSSスタイルを切り替える必要があります。

初めてユーザーがng-click要素をクリックすると、スタイルが適用されます.2回目はng-click要素をクリックして、期待したトグルとして変更されません。

作業以下のコード、

HTML検索：私はng-clickに基づいてCSSクラスをトグルする必要が

app.controller("myCtrl", function ($scope) { 
    $scope.myObj = { 
     "color": "white" 
    } 
    $scope.change = function() { 
     $scope.myObj = { 
      "color": "red" 
     } 
    } 
}); 

：JavaScriptの

<h1 ng-style="myObj" ng-click="change()">Welcome</h1> 

を。

誰もが同じようにアーカイブする方法をご案内します。

Answer 1

これを試してください。

var app = angular.module('myApp', []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.myObj = { 
 
    "color" : "blue"} 
 
$scope.change=function() 
 
{ 
 
    $scope.myObj.color == 'red' ? $scope.myObj.color = 'blue' : $scope.myObj.color = 'red'; 
 
    
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"><h1 ng-style="myObj" ng-click="change()">Welcome</h1> 
 
</div>

Answer 2

ng-classには、クリック時に元に戻すフラグを付けることができます。デフォルトでは

/* Default class */ 
 
h1 { 
 
    color: blue; 
 
} 
 
.red { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<h1 ng-app ng-class="{'red': flag}" ng-click="flag=!flag">Welcome</h1>

flagはundefinedなるので、falsey、そのクラスが適用されることはありませんでしょう。クリックすると、flag = !flagはフラグをtrueに設定し、redクラスが適用されます。次にクリックすると、flagはfalseに設定され、redクラスは削除されます。