如果在AngularJS中單擊另一個元素，如何添加和刪除類？

我試圖通過使用AngularJS ngClass指令單擊按鈕時切換一個類的主體。如果在AngularJS中單擊另一個元素，如何添加和刪除類？

我添加了一個變量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>

然後我加入到體內的類來切換：

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

，但它不工作，因爲它增加了兩個類別'ctr-show'和類別'ctr-hidden'。

來源

2015-11-05 Mustapha Aoussar

'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>

來源

2015-11-05 09:38:26

非常感謝！ –

我不完全按照你的問題，但你一定要像

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

來源

2015-11-05 09:14:03

或者：'納克級=「添加 'CTR-秀'？」 ctr-hidden'「' – Cerbrus

看起來不像是答案 –

如果在AngularJS中單擊另一個元素，如何添加和刪除類？

回答

相關問題