V Jayanth Reddy V Jayanth Reddy - 3 months ago 17
AngularJS Question

Change background colour of button when clicked

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
{
}

Answer

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>