Is there a way to toggle a CSS style based on an ng-click event?
When the user clicks the ng-click element for the first time, the style is applied. However, when they click the ng-click element for the second time, the CSS does not change as expected to toggle.
See the code snippet below for a working example:
HTML:
<h1 ng-style="myObj" ng-click="change()">Welcome</h1>
JavaScript:
app.controller("myCtrl", function ($scope) {
$scope.myObj = {
"color": "white"
}
$scope.change = function () {
$scope.myObj = {
"color": "red"
}
}
});
Is there a way to toggle CSS class based on an ng-click event?
If anyone can guide me on how to achieve the same, it would be greatly appreciated.