If you want to add some css or change css on a button click in angularjs,you need to use angular directive mg-class for this.
It is very simple you just need to bind a variable into the directive mg-class and change it from the controller.
Here is the HTML:
<html ng-app="app">
<head>
<title>Change on click</title>
</head>
<body ng-controller=Change>
<div ng-class=Changecss>{{Changecss}}</div>
<button ng-click="changeColor()>Change Color</button>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/example.js"></script>>
</body>
</html>
Now below is the js code you need to add to your controller.
var app = angular.module("app",[]);
app.controller("Change",function($scope){
$scope.Changecss = green;
$scope.changeColor = function(){
if ($scope.Changecss === green)
$scope.Changecss = "blue";
else
$scope.Changecss = green;
};
})
Now you need to define class in your css.
.green{
color:green;
}
.blue{
color:blue;
}
0 Comment(s)