Change the colour of button , after clicking it should be different colour

chandanpatra
Tera Contributor

‎11-19-2024 09:48 PM

Hi All,

HTML Code:

<div id="buttonContainer" style="display: flex; gap:15px; " >
<div ng-repeat="key in data.inc">
<button class="btn btn-primary" ng-click="c.selectCategory(key)" ng-class="key.button?'clicked-button':'clicked-button2'"> {{key.name}}</button>
</div>
<!-- <button class="btn btn-primary" ng-click="c.selectCategory1('IT')" ng-class=> IT</button>-->


</div>

CSS:

#buttonContainer {
display: flex;
justify-content: center;
align-items: center;
}
.clicked-button {
background-color: #FFA500 !important; /* New background color when clicked */
}
.clicked-button2 {
background-color: #008000 !important; /* New background color when clicked */
}

Client script:

 c.selectCategory = function(category) {
$scope.status = "Enable";
$scope.toggle = true;
 
  
//"key.button?'clicked-button':'clicked-button2'"
// $scope.buttonClicked= false;
if(category.name=='Tech majis'){
category.button = true;
// $scope.toggle = true;
category.button  = !category.button ;
    this.status = category.button  ? "Enable" : "Disable";
}
else if(category.name=='Customer support'){
category.button = true;
// $scope.toggle = true;
category.button  = !category.button ;
    this.status = category.button  ? "Enable" : "Disable";
}
else{
category.button = true;
// $scope.toggle = true;
category.button  = !category.button ;
    this.status = category.button  ? "Enable" : "Disable";
}
 
c.data.controller = category.name;
c.server.update().then(function(){
 
c.data.controller='';
 
})
  };
Image:
chandanpatr_0-1732081537646.png

On the starting all three buttons color should be different and after clicking one of the buttons colour should changed.

Can anyone help me i have gave you HMTL , CSS , Client script . Can anyone change and give me the correct code .

 

@Juhi Poddar 

 

Thanks,

Chandan 

0 Helpfuls