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

Question

我知道这个问题有一些答案，但我找不到我的代码结构的解决方案......

我想在点击isVisible

时添加课程notVisible或toggle-class

JSFIDDLE

这是我的代码：

<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

＆＃13;

＆＃13;

.isVisible{
   display:none;
  }

.notVisible{
     display:show;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

试试这个

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

Answer 2

您的代码似乎没有问题，除了一个声明

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

这必须是你的声明

并定义 isVisible 和 notVisible 类

Answer 3

试试这个

 <Button
    android:id="@+id/btn_top"

    android:text="Press"
    android:textColor="#FFFFFF"
    android:textSize="30sp"
    android:drawableTop="@drawable/transport"

    android:layout_width="270dp"
    android:layout_height="140dp"
    android:paddingTop="5dp"
    android:background="@drawable/btn_top_shape"
    android:shadowColor="#8F8F8F"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowRadius="5"
    android:layout_marginRight="31dp"
    android:layout_below="@+id/imageViewTitle"

    android:layout_centerHorizontal="true" />

Answer 4

我已更新您的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>