如果在AngularJS中单击另一个元素，如何添加和删除类？
[英]How to add and remove a class if another element is clicked in AngularJS?
问题描述
I tried to toggle a class of body when a button is clicked by using the AngularJS ngClass directive. 
我尝试使用AngularJS ngClass指令单击按钮时切换主体类。
I have added a variable ng-model="add" to the button: 我在按钮中添加了一个变量ng-model="add" ：
<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' . 但它不起作用，因为它同时添加了'ctr-show'类和'ctr-hidden' 。
2 个解决方案
解决方案1
1 已采纳 2015-11-05 09:38:26
'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>
解决方案2
0 2015-11-05 09:14:03
我没有完全关注您的问题，但是您肯定想要
<body ng-class="{'ctr-show': add, 'ctr-hidden': !add}">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
AngularJS指令在点击时添加类，但如果单击则删除并将其添加到另一个元素 - AngularJS Directive to add class on click, but remove and add it to another element if clicked
单击另一个元素时如何删除类？ - How to remove a class when another element is clicked?
如果单击另一个元素，如何将 class 添加到另一个元素？ - How to add class to an element if clicked on another?
AngularJS：如何在单击按钮时在元素上添加类 - AngularJS: How to add a class on element when button is clicked
jQuery删除类并在单击元素上添加类 - Jquery remove class and add class on clicked element
删除类并在单击元素时添加类 - remove class and add class when an element is clicked
如何将活动 class 添加到单击的元素并将其从其他元素中删除？ - How to add active class to clicked element and remove it from others?
BackboneJS向单击的元素添加和删除类 - BackboneJS Add and remove class to clicked element
将 class 添加到单击的元素，但从其他元素中删除 - Add class to clicked element, but remove from others
如何在AngularJS中向元素添加类并将其移除 - How to add a class to an element and remove to the others siblings in AngularJS
相关标签