AngularJs Change Button Color
AngularJs Change Button Color: There are many ways to change button color in angularjs. Here in this tutorial we are going to explain some of them. You can use our online editor to edit and try the code.
AngularJs Change Button Color onclick Example
You can use the ng-class to change the background color of the button. Let us go step by step –
JavaScript Part
JavaScript Part Contains the following script as below –
AngularJs Change Button Color Example :
<button ng-click="changeBgColor()" class="{{myButton}}">My Button</button> <script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.myButton = 'default';
$scope.changeBgColor = function() {
$scope.myButton = "clicked";
};
});
</script>
|
Css Part
Css Part Contains the following style as below –
AngularJs Change Button Color ng-click Css :
<style type="text/css">
.default{
background:skyblue;
}
.clicked{
background:yellow;
}
</style>
|
Complete Part
Now let us create the full example as below-
AngularJs Change Button Text / Label Example :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.myButton = 'default';
$scope.changeBgColor = function() {
$scope.myButton = "clicked";
};
});
</script>
<style type="text/css">
.default{
background:skyblue;
}
.clicked{
background:yellow;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="changeBgColor()" class="{{myButton}}">My Button</button>
</div>
</div>
</body>
</html>
|
If you run the above example it will produce the output something like this –
Advertisements
