onclick change css on one html element

Question

inside view I have

<a ng-class="{'active' : check}" ng-click="doSomething()">1</a>
<a ng-class="{'active' : check}" ng-click="doSomething()">2</a>

 $scope.doSomething= function () {
     $scope.check = true;
 }

I want to set css class to onclicked element only. Using this code I change on multiple elements. How to limit only to one element?

Answer 1

You can set the value of check variable as follow. And in ng-class compare the value of check to the respective value.

<a ng-class="{'active' : check === 1}" ng-click="check = 1">1</a>
<a ng-class="{'active' : check === 2}" ng-click="check = 2">2</a>

Demo

With a function in controller:

<a ng-class="{'active' : check === 1}" ng-click="doSomething(1)">1</a>
<a ng-class="{'active' : check === 2}" ng-click="doSomething(2)">2</a>

Controller:

$scope.doSomething= function (index) {
    $scope.check = index;
};