Get origin of a Ng-click on buttons? - angularjs

Question

I'm trying to reset background-colors (bgNeutral) of all my buttons, except the only one who are solicited (who have to switch in "bgSelected"):
<button ng-class="button1" ng-click="addActifOnMe($1)" class="bgSelected"></button>
<button ng-class="button2" ng-click="addActifOnMe($2)" class="bgNeutral"></button>
<button ng-class="button3" ng-click="addActifOnMe($3)" class="bgNeutral"></button>
This is my .js:
app.controller("angularController", function ($scope) {
$scope.button1 = "bgSelected";
$scope.addActifOnMe = function (1) {
$scope.button2 = "bgNeutral";
$scope.button3 = "bgNeutral";
$scope.button1 = "bgSelected";
};
$scope.addActifOnMe = function (2) {
$scope.button1 = "bgNeutral";
$scope.button3 = "bgNeutral";
$scope.button2 = "bgSelected";
};
$scope.addActifOnMe = function (3) {
$scope.button1 = "bgNeutral";
$scope.button2 = "bgNeutral";
$scope.button3 = "bgSelected";
};
});
CSS can be something like that:
.bgSelected{
background-color: red;
}
.bgNeutral{
background-color: blue;
}
But actually this, doesn't work... I'm trying to use ngClick with $event in my function. Someone have a better way for doing that ?
Thank you ! Best regards.

Answer 1

You can do this by using a variable selectedButton in your controller to track which button is selected.
<button class="neutral" ng-class="{selected: todoList.selectedButton === 1}" ng-click="todoList.select(1)">button 1</button>
<button class="neutral" ng-class="{selected: todoList.selectedButton === 2}" ng-click="todoList.select(2)">button 2</button>
<button class="neutral" ng-class="{selected: todoList.selectedButton === 3}" ng-click="todoList.select(3)">button 3</button>
controller:
angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.selectedButton = 1;
todoList.select = function(buttonNumber) {
todoList.selectedButton = buttonNumber;
}
});
Here's a plunker to demonstrate this working