Question

我有：

<div class="btn"></div>
<div class="main_menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

我想点击.btn来切换＆＃39; class1＆＃39;在他身上并切换到第二课＆＃39;在.main_menu

Answer 1

<div class="btn" ng-class="{'class1': btnClicked}" ng-click="btnClicked = !btnClicked"></div>
<div class="main_menu" ng-class="{'class2': btnClicked}">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

Answer 2

看看这个小提琴

http://jsfiddle.net/Snsa90/bnd40se5/4/

html就像是

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="toggle()" class="btn" ng-class="{'added-btn-class' : toggleCheck}">Toggle classes</button>
  <div class="main_menu" ng-class="{'added-menu-class' : toggleCheck}">
    <ul>
      <li>Toggle check : {{toggleCheck}}</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

和js

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', MyCtrl);

    function MyCtrl($scope) {
      $scope.toggleCheck = false;
      $scope.toggle = function() {
        $scope.toggleCheck = !$scope.toggleCheck;
      }
    }

注意：根据您的项目和情况，这可能会有所不同，需要使用适当的范围等等，但是现在，这个简单的例子应该会让您朝着正确的方向前进。

两个div上的Angular toggle类

2 个答案: