Button color change on click at other button using ng-click

Question

I am new to angular. I have two button as I will click on button1 so its color will be change from green to red and after that I will click on button2, so button1 color will be again green. How I can do it using ng-click ?

Its my index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
	<script type="text/javascript" src="app.js"></script>

	<title></title>
</head>
<body ng-controller ="testCtrl" >
<button type="button" class="btn btn-default"   ng-click="chngcolor()" >Chnage Color</button>
 <button type="button" class="btn btn-default"  ng-click="chcolor()" >Pre Color</button>
</body>
</html>

and this is my app.js

var myApp = angular.module("myApp",[]);
	myApp.controller('testCtrl', function($scope){
		$scope.chngcolor = functionn{
		
		};
	});

Which code should i write in app.js ?

duplicate

elreeda
– elreeda

2016-07-07 09:51:10 +00:00
Commented Jul 7, 2016 at 9:51 — elreeda
– elreeda, Commented Jul 7, 2016 at 9:51

shammelburg · Accepted Answer · 2016-07-07 09:53:46Z

1

Here is an example using the angular controller and setting ng-style

<div ng-controller="MainController">
  <button type="button" class="btn btn-default" ng-click="chngcolor()" ng-style="color">Change Color</button>
  <button type="button" class="btn btn-default" ng-click="chcolor()">Pre Color</button>
</div>

Controller code

  // set default color
  $scope.color = {'background-color': 'green'};

  $scope.chngcolor = function() {
    $scope.color = {'background-color': 'red'};
  };

  $scope.chcolor = function() {
    $scope.color = {'background-color': 'green'};
    // Shorter way to for the same result
    // $scope.color.backgroundColor = 'green';
  };

Here is a JSFiddle

answered Jul 7, 2016 at 9:53

shammelburg

7,3687 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun Ghosh · Accepted Answer · 2016-07-07 09:47:12Z

1

<button type="button" class="btn btn-default" ng-class="color" ng-click="color=red" ng-init="color=green">Chnage Color</button>
<button type="button" class="btn btn-default"  ng-click="color=green" >Pre Color</button>

<style>
   .green {
      color: green;
   }
  .red {
      color: red;
   }
</style>

answered Jul 7, 2016 at 9:47

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Comments

dreamweiver · Accepted Answer · 2016-07-07 10:02:58Z

0

Add css class dynamically using ng-class directive on click event.

CSS:

 .red-color {
    background-color: red;
 }

 .green-color {
    background-color: green;
 }

HTML:

  <button type="button" class="btn btn-default" ng-class="color" ng-click="color='red-color'">Change Color</button>
  <button type="button" class="btn btn-default" ng-click="color='green-color'">Pre Color</button>

Live Demo @ JSFiddle

edited Jul 7, 2016 at 10:02

answered Jul 7, 2016 at 9:57

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Button color change on click at other button using ng-click

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related