Abhishek Abhishek - 2 months ago 7
AngularJS Question

Angular bootstrap change button colors on click

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?

Answer

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);
}
Comments