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'
.
'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>
我没有完全关注您的问题,但是您肯定想要
<body ng-class="{'ctr-show': add, 'ctr-hidden': !add}">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.