AngularJS：如何在单击按钮时在元素上添加类

Question

I know that this question has some answers but I can't find a solution for my code structure...

I want to add class isVisible or notVisible when I click on toggle-class

JSFIDDLE

This is my code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
  <div>
    <div>
      <div>
        <a href="#" class="toggle-class" ng-click="element = !element">Click to toggle menu</a>
      </div>
    </div>
  </div>
  <div ng-class="{isVisible: element, notVisible: !element}">
    Add class
  </div>  
</div>

Answer 1

 .isVisible{ display:none; } .notVisible{ display:show; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div> <div> <div> <a href="#" class="toggle-class" ng-click="element = !element">Click to toggle menu</a> </div> </div> </div> <div ng-class="{'isVisible': element, 'notVisible': !element}"> Add class </div> </div> 

try this

  <div ng-class="{'isVisible': element, 'notVisible': !element}">

Answer 2

You code seems to be okay except one statment

     <div ng-class="{'isVisible': element, 'notVisible': !element}"> 

this must be your statment

and define isVisible and notVisible class

Answer 3

Try this one

<div ng-class="{'isVisible': element, 'notVisible': !element}">Add class</div>

.isVisible{color:red;}
.notVisible{ color:green; }

Answer 4

I have update your FIDDLE

<div ng-app ng-init="element= true">

        <a href="#" class="toggle-class" ng-click="element = !element">Click to toggle menu
        </a>
  <div ng-class="{'isVisible': element, 'notVisible': !element}">
    Add class
    </div>  
</div>