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

Question

I got the buttons list from resource. It consist of 10 buttons like t1,t2,t3,t4,t5,t6,t7,t8,t9,t10

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>
</div>

this is my method

 $scope.ng-click=gettable(table){
  //
  }

Abhinav · Accepted Answer · 2016-04-28 10:15:52Z

1

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)">
{{table.tablename}}</button>

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"
}

edited Apr 28, 2016 at 10:15

answered Apr 28, 2016 at 10:00

Abhinav

3531 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SrinivasAppQube Over a year ago

Thanks for your quick response.first time click on button btn-info is activated. but second time i click on the same button btn-success is not applied.

SrinivasAppQube Over a year ago

here how to set Default color is green for button. for loop not working for me

rhavendc · Accepted Answer · 2016-04-28 09:59:01Z

1

Here's my suggestion: Inside your $scope.ng-click=gettable(table){ ...... }

Create an array of colors
Everytime the button clicks, pull a random color value inside that array

answered Apr 28, 2016 at 9:59

rhavendc

1,01110 silver badges21 bronze badges

Comments

FloG · Accepted Answer · 2016-04-28 10:12:58Z

0

Using the controllerAs syntax (which I advise you to use), you can work with the following.

html:

<div ng-repeat="table in ctrl.tables">
    <button type="button" ng-click="ctrl.getTable(table)" ng-style="{ 'background-color': table.color }">{{table.tablename}}</button>
</div>

js:

this.getTable = function(table) {
    table.color = "red";
};

https://plnkr.co/edit/axzyUQJowlSEClszrIQs

answered Apr 28, 2016 at 10:12

FloG

4915 silver badges10 bronze badges

2 Comments

SrinivasAppQube Over a year ago

how to set default color green for button

FloG Over a year ago

Well just use the style attribute on the button... <button type="button" ng-click="ctrl.getTable(table)" ng-style="{ 'background-color': table.color }" style="background-color: green;">{{table.tablename}}</button>

suulisin · Accepted Answer · 2016-04-28 10:26:32Z

0

var colors=['red','green','yellow','black','blue'];
$scope.color=null;
$scope.ng-click=gettable(table){ 
var colorToApply=colors[Math.floor(Math.random()*colors.length)];
$scope.color=colorToApply
 }

Now you can define css rule here

.green{
  color:green;
}
.blue{
  color:blue;
}
.red{
  color:red;
}
.yellow{
  color:yellow;
}

Then in your view you can set ng-style on the button you want to change color and bind it to color in the scope like

<button ng-style="color">Change color</button>

answered Apr 28, 2016 at 10:26

suulisin

1,4351 gold badge10 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related