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

[chandanpatra]

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:

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 

[Juhi Poddar · Accepted solution]

Hello @chandanpatra 

Please try the below script:

HTML

<div ng-if="data.matchfound" 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'>
            {{key.name}}
        </button>
    </div>
</div>

CSS

#buttonContainer {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.button1 {
  background-color: #FFA500; /* Orange */
}

.button2 {
  background-color: #008000; /* Green */
}

.button3 {
  background-color: #ffc0cb /* pink */
}

Client script:

c.selectCategory = function(category) {
        $scope.status = "Enable";
        $scope.toggle = true;
        if (category.name == 'Tech majis') {
            category.button = 'button1';
            this.status = category.button == 'button1' ? "Enable" : "Disable";
        } else if (category.name == 'Customer support') {
            category.button = 'button2';
            this.status = category.button == 'button2' ? "Enable" : "Disable";
        } else {
            category.button = 'button3';
            this.status = category.button == 'button3' ? "Enable" : "Disable";
        }
    };

Result:

Initially 

On Click of button:

Hope this helps!

"If you found my answer helpful, please like and mark it as the "accepted solution". It helps others find the solution more easily and supports the community!"

Thank You
Juhi Poddar