如何使用Angular JS同時僅激活一個容器

Question

我有一個angular js應用程序，我想在一個單擊的容器上切換一個“活動”類，並從其他容器中刪除該活動類，即，只有一個容器應同時處於活動狀態。 此刻，我想到了以下代碼，該代碼可同時切換所有容器上的活動類。 是否可以指定單擊的容器的ID或是否有其他解決方法？

<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

您可以使用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：在控制器中

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

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

演示： http ： //jsfiddle.net/tusharj/z7urh4vf/

Answer 2

好的，我想出了Grundy建議的以下解決方案。

<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

您可以通過以下幾種方法來做到這一點

 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>