How to add and remove a class if another element is clicked in AngularJS?

Question

I tried to toggle a class of body when a button is clicked by using the AngularJS ngClass directive.

I have added a variable ng-model="add" to the button:

<md-button aria-label="Add" class="md-icon-button" ng-model="wrong">
    <md-icon md-svg-icon="other:add" md-menu-align-target></md-icon>
</md-button>

Then I added to the body the classes to toggle:

<body class="ctr-hidden" ng-class="{'ctr-show': add, 'ctr-hidden': add}">

but it does not work, because it adds both the class 'ctr-show' and class 'ctr-hidden'.

Alexander Elgin · Accepted Answer · 2015-11-05 09:38:26Z

1

'use strict';

angular
    .module('app', [])
    .controller('ToggleClassCtrl', function($scope, $rootScope) {
        $rootScope.classIsSet = false;
  
        $scope.toggleClass = function() {
            $rootScope.classIsSet = !$rootScope.classIsSet;
        };
    });

.result-block.ctr-show {
  background-color: #00ff00;
}

.result-block.ctr-hidden {
  background-color: #ff0000;
}

.result-block {
  width: 200px;
  height: 200px;
  background-color: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="app">
    <div class="result-block" ng-class="{'ctr-show': classIsSet, 'ctr-hidden': !classIsSet}">
    </div>
    <div ng-controller="ToggleClassCtrl">
        <button ng-click="toggleClass()">Toggle the class</button>
    </div>
</div>

answered Nov 5, 2015 at 9:38

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

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

Comments

Simon H · Accepted Answer · 2015-11-05 09:14:03Z

0

I don't fully follow your question but surely you want something like

<body ng-class="{'ctr-show': add, 'ctr-hidden': !add}">

answered Nov 5, 2015 at 9:14

Simon H

21.2k14 gold badges83 silver badges144 bronze badges

1 Comment

Alexander Elgin Over a year ago

It does not look like an answer

Collectives™ on Stack Overflow

How to add and remove a class if another element is clicked in AngularJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related