Change button color after click in Angularjs

Question

This is what I have now: index.html

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <button class="btn btn-danger" ng-click="start()">Start</button>
  </div>
</div>


function TodoCtrl($scope) {
  $scope.start = function() {

  };
}

What can I fill in the $scope.start function so that once the button is clicked, the color of the button turns yellow.

Ronnie · Accepted Answer · 2016-04-12 16:12:40Z

12

you can use ng-class Define a var like $scope.started = false; and inside you start function set it to true. On your button do this:

ng-class="{'btn-warning': started, 'btn-danger': !started}"

another way to write it:

ng-class="started && 'btn-warning' || !started && 'btn-danger'"

note: remove btn-danger from your curre class attribute

EDIT

The newer, more common way is the standard ternary operator (also easier to read):

ng-class="started ? 'btn-warning' : 'btn-danger'"

edited Apr 12, 2016 at 16:12

answered Nov 5, 2013 at 0:06

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

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

6 Comments

puscan Over a year ago

I'm really new to Angularjs. The button still doesn't turn yellow after I follow this steps. Any more changes I should make?

Ronnie Over a year ago

are you using bootstrap? btn-danger is a red button and btn-warning is yellow...granted you're using bootstrap

puscan Over a year ago

Great it's working now! Another question is that if I add ng-disabled attributes in my button, how to make the button grey after ng-desabled is equal to true? Thanks a lot

Sagar Devanga Over a year ago

want to have 2 different colors(grey and blue) for 2 states of the button ACTIVE and INACTIVE. Please help THANX

Ronnie Over a year ago

@SagarDevanga so make a class with the colors you want and use the same logic

|

El Dude · Accepted Answer · 2014-07-12 22:08:03Z

2

The probably best way is to bind the button style to the variable like this:

<button class="button button-block {{buttonStyle}}" ng-click="start()">
    {{buttonText}}
</button>

and define buttonStyle and buttonText in your scope

$scope.buttonText = "Start";
$scope.buttonStyle="button-calm";

$scope.start = function(){
    $scope.buttonText = "Clicked!";
    $scope.buttonStyle="button-assertive";
}

answered Jul 12, 2014 at 22:08

El Dude

5,70811 gold badges65 silver badges116 bronze badges

Collectives™ on Stack Overflow

Change button color after click in Angularjs

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related