Angular bootstrap change button colors on click

Question

I have the following

<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>

When we click on the + sign, it gives me a panel with 2 buttons. These buttons are set to default. But i want to have a function that sets the button to primary whenever clicked(active), and go back to default when it is unclicked or another button is clicked.

How do i achieve this functionality?

j.wittwer · Accepted Answer · 2014-04-24 03:14:06Z

5

Just use ng-class, along with the variables you are already setting to toggle display:

<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>

Here is a working demo: http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview

Note: I took a shot at consolidating some of the logic in the showMoreFunc function. I think this works, but your original code worked perfectly well with ng-class:

$scope.showMoreFunc = function(view) {
  $scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
  $scope.display.academic = (view == "academic" && !$scope.display.academic);
}

edited Apr 24, 2014 at 3:14

answered Apr 24, 2014 at 3:07

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Comments

Tim · Accepted Answer · 2014-04-23 21:44:14Z

1

Using the Buttons (Radio) from http://angular-ui.github.io/bootstrap/ :

Change

<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="academic">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="appliedsciences">Applied Sciences</button>

to

<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="radioModel" btn-radio="'Left'">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="radioModel" btn-radio="'Right'">Applied Sciences</button>

and in your controller add

$scope.radioModel = 'Left';

Result, if btn Academic is 'active'

left

and this if btn Applied Sciences is 'active'

enter image description here

answered Apr 23, 2014 at 21:44

Tim

43.6k19 gold badges138 silver badges152 bronze badges

2 Comments

Abhishek Over a year ago

looks great but it doesn't work when i click twice on the same button. the button still remains active.

Rafael Over a year ago

I have a problem with thisn since it requires an ngModel ... i dont want that.

Eric Chen · Accepted Answer · 2014-04-23 22:28:55Z

1

I think best way is using pure css to deal with this.

.btn:focus{
  outline: 0 !important;  
}
.btn:active  {
  outline:0;
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

I wrote a simple plnkr demo with bootstrap 3.1, when you clicking default button, It will change to primary color.

checkout http://plnkr.co/edit/KJR8xL?p=preview

answered Apr 23, 2014 at 22:28

Eric Chen

3,7082 gold badges20 silver badges15 bronze badges

Comments

Tunaki · Accepted Answer · 2016-09-07 08:13:00Z

-1

This will work

<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>

edited Sep 7, 2016 at 8:13

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered Sep 7, 2016 at 7:56

Ravi Sharma

113 bronze badges

Collectives™ on Stack Overflow

Angular bootstrap change button colors on click

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related