如何使用ng-class ng-click删除类?

时间:2015-01-11 22:13:57

标签: javascript angularjs angularjs-ng-click ng-class

http://plnkr.co/edit/6AEvKuyXai9LbcNjfluN?p=preview

我有3个链接,第一个有.active类。当您单击2和3时,数字1将丢失.active类。现在,如果你单击2或3,它们将正确更新,但1仍然有活动类:(

<ul>
  <li class="active"
      data-ng-class="{'active' : toggleObject == 1}"
      data-ng-click="toggleObject = 1">a click 1
  </li>
  <li data-ng-class="{'active' : toggleObject == 2}"
      data-ng-click="toggleObject = 2">a click 2
  </li>
  <li data-ng-class="{'active' : toggleObject == 3}"
      data-ng-click="toggleObject = 3">a click 3
    <br>
  </li>
</ul>

1 个答案:

答案 0 :(得分:3)

您需要从第一个li中删除该类,而是将控制器中的toggleObject设置为1。

function HolaCtrl($scope){
  $scope.toggleObject = 1;
}

<li data-ng-class="{'active' : toggleObject == 1}" data-ng-click="toggleObject = 1">a click 1<br>
</li>
<li data-ng-class="{'active' : toggleObject == 2}" data-ng-click="toggleObject = 2">a click 2
<br>
</li>
<li data-ng-class="{'active' : toggleObject == 3}" data-ng-click="toggleObject = 3">a click 3
        <br>
</li>