How to make only one container active at the same time with Angular JS

Question

I have an angular js application that I want to toggle an "active" class at a clicked container and remove the active class from other containers, ie only one container should be active at the same time. At the moment I came up with the following code that toggles an active class at all containers at the same time. Any way to specify an id of a clicked container or is there any other workaround?

<div ng-class="{ active: isActive}" ng-click="toggleActive()"></div>
<div ng-class="{ active: isActive}" ng-click="toggleActive()"></div>
<div ng-class="{ active: isActive}" ng-click="toggleActive()"></div>

$scope.isActive = false;
$scope.toggleActive= function() {
    $scope.isActive = !$scope.isActive ;
}

Answer 1

You can use index :

HTML:

<div ng-controller="sampleController">
    <div ng-class="{ active: (activeIndex == 1)}" ng-click="toggleActive(1)">aaa</div>
    <div ng-class="{ active: (activeIndex == 2)}" ng-click="toggleActive(2)">bbb</div>
    <div ng-class="{ active: (activeIndex == 3)}" ng-click="toggleActive(3)">ccc</div>
</div>

Javascript: In controller

$scope.isActive = false;
$scope.toggleActive = function (index) {
    $scope.isActive = !$scope.isActive;

    $scope.activeIndex = $scope.isActive ? index : -1;
};

Demo: http://jsfiddle.net/tusharj/z7urh4vf/

Answer 2

OK, I came up with the following solution as Grundy suggested.

<div ng-controller="sampleController">
    <div ng-class="{ active: (activeIndex == 1)}" ng-click="toggleActive(1)">aaa</div>
    <div ng-class="{ active: (activeIndex == 2)}" ng-click="toggleActive(2)">bbb</div>
    <div ng-class="{ active: (activeIndex == 3)}" ng-click="toggleActive(3)">ccc</div>
</div>

$scope.activeIndex = -1;
$scope.toggleActive = function(index) {
    $scope.activeIndex = index;
}

Answer 3

You can do this with a few ways

 angular.module('app', []) .controller('c1', function($scope) { $scope.isActive = [false, false, false]; $scope.toggleActive = function(index) { for (var i = 0, len = $scope.isActive.length; i < len; i++) { if (i == index) $scope.isActive[i] = !$scope.isActive[i] else $scope.isActive[i] = false } } }) .controller('c2', function($scope) { $scope.activeIndex = -1; $scope.toggleActive = function(index) { $scope.activeIndex = $scope.activeIndex == index ? -1 : index; } }) .controller('c3', function($scope) { $scope.items = [123, 456, 789]; $scope.active == null; $scope.toggleActive = function(item) { $scope.active = $scope.active == item ? null : item; } }); 

 .active { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="c1"> First: <div ng-class="{ active: isActive[0]}" ng-click="toggleActive(0)">123</div> <div ng-class="{ active: isActive[1]}" ng-click="toggleActive(1)">456</div> <div ng-class="{ active: isActive[2]}" ng-click="toggleActive(2)">789</div> </div> <div ng-controller="c2"> Second: <div ng-class="{ active: activeIndex==1}" ng-click="toggleActive(1)">123</div> <div ng-class="{ active: activeIndex==2}" ng-click="toggleActive(2)">456</div> <div ng-class="{ active: activeIndex==3}" ng-click="toggleActive(3)">789</div> </div> <div ng-controller="c3"> With ng-repeat: <div ng-class="{ active: active == item}" ng-repeat="item in items" ng-click="toggleActive(item)">{{item}}</div> </div> </div>