Change button colors dynamically using angular js

时间:2015-06-26 10:20:03

标签: angularjs

I have two buttons which are in green and red color. I want to change color of button. Suppose If i click on red colored button green colored button to change to gray. Similarly when i click on green colored button , red colored button to change gray. How i can achieve in angular js?

1 个答案:

答案 0 :(得分:3)

请查看工作示例:http://plnkr.co/edit/DHQr4AMhBkQsgG4GwrB4?p=preview

控制器

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.click = '';
});

HTML

<button ng-click="click = 'red'" ng-class="{'red': click == 'red' || click == '', 'grey': click == 'green'}"> RED</button>
<button  ng-click="click = 'green'" ng-class="{'green': click == 'green' || click == '', 'grey': click == 'red'}">GREEN</button>

CSS

.grey {
  background-color :#808080;
}

.red {
  background-color :#FF0000;
}
.green {
  background-color :#008000;
}