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?

Answer 1

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.