Search code examples
javascriptangularjsangularjs-ng-clickng-class

How to remove class using ng-class ng-click?


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

I have 3 links, the first 1 has the .active class. When you click on 2 and 3, number 1 should lose the .active class. Right now if you click 2 or 3, they will update correctly, but 1 still has the active class on it :(

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

Solution

  • You need to remove the class from the first li and instead set the toggleObject to 1 in the controller.

    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>