Change Buttons when Clicked

Question

Below is my HTML code with Bootstrap and Angular:

   <button class="btn btn-secondary btn-sm" ng-click="buy(player)">{{history.indexOf(player)>=0?'REMOVE':'SELECT'}}</button>

When i click the button, the wording of the button changes from 'SELECT' to 'REMOVE'. However, what i want is the colour of the button to change so that it is the default colour when on 'SELECT' but the red "btn-danger" class when 'REMOVE'.

Is this possible?

simple change the class like you did with content, it's easy with angularjs https://stackoverflow.com/questions/20460369/adding-and-removing-classes-in-angularjs-using-ng-click — Temani Afif, Oct 31 '17 at 23:41

score 2 · Accepted Answer · answered Nov 01 '17 at 03:25

Sure! And it's really simple.

 <button class="btn btn-secondary btn-sm" ng-class="{'btn-danger': history.indexOf(player) >= 0 }" ng-click="buy(player)">{{history.indexOf(player)>=0?'REMOVE':'SELECT'}}</button>

Note ng-class directive added to the button.

Change Buttons when Clicked

1 Answers1