angularjs toggle class in bootstrap btn-group

Question

I have a group of buttons:

<div class="btn-group">
    <button class="btn btn-primary" ng-click="filter_emails()"><span class="ion-home mr-2"></span>All</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('new')"><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('inbox')"><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('shielded')"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

and an ng-click function as this:

$scope.filter_emails = function(category) {
    if (category === "inbox") {
        $scope.grouped = group(inbox($scope.emails));
    } else if (category === "shielded") {
        $scope.grouped = group(shield($scope.emails));
    } else if (category === "new") {
        $scope.grouped = group(is_new($scope.emails));
    } else {
        $scope.grouped = group($scope.emails);
    }
}

The desired behavior I am trying to achieve is to add 'btn-primary' / remove 'btn-outline-primary' on the button clicked and add 'btn-outline' / remove 'btn-primary' from the previously selected button.

I am pretty brand new to angularjs so I am not sure how to do this and I want to resist augmenting anything with jQuery :)

Akansh · Accepted Answer · 2017-11-08 21:42:06Z

You can do this easily by storing the clicked button, update your method like

$scope.filter_emails = function(category) {
    $scope.selectedButton = category;
    if (category === "inbox") {
        $scope.grouped = group(inbox($scope.emails));
    } else if (category === "shielded") {
        $scope.grouped = group(shield($scope.emails));
    } else if (category === "new") {
        $scope.grouped = group(is_new($scope.emails));
    } else {
        $scope.grouped = group($scope.emails);
    }
}

And in your html, you simply use ng-class to update the class accordingly,

<div class="btn-group">
    <button class="btn" ng-class={'btn-primary': !selectedButton, 'btn-outline-primary': selectedButton} ng-click="filter_emails()"><span class="ion-home mr-2"></span>All</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'new', 'btn-outline-primary': selectedButton !== 'new'} ng-click="filter_emails('new')"><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'inbox', 'btn-outline-primary': selectedButton !== 'inbox'} ng-click="filter_emails('inbox')"><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn" ng-class={'btn-primary': selectedButton === 'shielded', 'btn-outline-primary': selectedButton !== 'shielded'} ng-click="filter_emails('shielded')"><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

Jimenemex · Accepted Answer · 2017-11-08 21:40:39Z

1

Create a directive and put it in your HTML

HTML

<div class="btn-group">


   <button class="btn btn-primary" ng-click="filter_emails()" get-siblings><span class="ion-home mr-2"></span>All</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('new')" get-siblings><span class="ion-plus-circled mr-2"></span>New</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('inbox')" get-siblings><span class="ion-archive mr-2"></span>Inbox</button>
    <button class="btn btn-outline-primary" ng-click="filter_emails('shielded')" get-siblings><span class="ion-paper-airplane align-middle mr-2"></span>Shielded</button>
</div>

Javascript

yourApp.directive('getSiblings', function() {
   return {
      scope: true,
      link: function(scope,element,attrs){
        element.bind('click', function() {
            element.addClass('btn-primary');
            element.removeClass('btn-outline-primary');
            element.siblings('button').addClass('btn-outline');               
            element.siblings('button').removeClass('btn-primary');               
         }
      }
   }
});

answered Nov 8, 2017 at 21:40

Jimenemex

3,1863 gold badges29 silver badges65 bronze badges

5 Comments

Sandra Willford Over a year ago

showing my newbieness, here i was trying to do it from the controller!

Jimenemex Over a year ago

@SandraWillford Consider accepting my answer or other answers if they solved the problem.

Sandra Willford Over a year ago

yea for some reason gulp concat is throwing an error at element.bind('click', function() {} ? any guesses?

Sandra Willford Over a year ago

this is working, sort of. It's adding the class but not removing from the siblings.

Jimenemex Over a year ago

@SandraWillford Try just removing 'button' from .silbings('button') if there are no other siblings other than buttons in the div

Collectives™ on Stack Overflow

angularjs toggle class in bootstrap btn-group

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related