SrinivasAppQube SrinivasAppQube - 2 years ago 102
HTML Question

How to change the button color using ng-click function?

I got the buttons list from resource. It consist of 10 buttons like

When I click the on t1 button first time button color change to red. Second time I click on same button color change to green.

Please tell me how to do this

<div class="col-sm-2 col-lg-1 col-md-1" ng-repeat="table in tables" style="margin-left:1px">
<button type="button" class="btn btn-success" ng-click="getTable(table)">{{table.tablename}}</button>

this is my method


Answer Source

It's easy. Just bind one more property with your all the items in tables array like this-

for(var i = 0; i < $scope.tables.length; i++)
    $scope.tables[i].btnClass = "btn-success";

then in HTML, assign this class like this:

<button type="button" class="btn {{table.btnClass}}" ng-click="getTable(table)">

and ng-click function as:

$scope.getTable = function(table) {
    table.btnClass = table.btnClass == "btn-info" ? "btn-success" : "btn-info"

Or if you want to change manual colors then create one class in css like this:

.red-button {
    background-color: "red";

Then in the function

$scope.getTable = function(table) {
    table.btnClass = table.btnClass == "red-button" ? "btn-success" : "red-button"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download