I would like to change the background colour of a button when it is clicked
HTML code:
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="style1()">
Celsius
</button>
<button type="button" class="btn btn-default" ng-click="style2()">
Fahrenheit
</button>
</div>
Angular code where the background colours of the buttons should be changed:
$scope.style
{
};
$scope.style2
{
}
You should do it this way
angular.module('myapp',[]).controller('testCtrl', function($scope){});<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="testCtrl">
<div class="btn-group" ng-init="style={'background-color' : 'green'}">
<button type="button" class="btn btn-default" ng-style="style1"
ng-click="style1=style; style2=null">Celsius</button>
<button type="button" class="btn btn-default" ng-style="style2"
ng-click="style2=style; style1=null">Fahrenheit</button>
</div>
<br>
</body>
</html>