Javascript 如何使用Angular JS同时只激活一个容器

我有一个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 ;
}

$scope.isActive=false；
$scope.toggleActive=function（）{
$scope.isActive=！$scope.isActive；
}

您可以使用

索引

：

HTML:

---

演示：

您可以使用

索引

：

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>

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

aaa
bbb
ccc
$scope.activeIndex=-1；
$scope.toggleActive=函数（索引）{
$scope.activeIndex=索引；
}

好的，我按照格伦迪的建议提出了以下解决方案

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

aaa
bbb
ccc
$scope.activeIndex=-1；
$scope.toggleActive=函数（索引）{
$scope.activeIndex=索引；
}

您可以通过几种方法来实现这一点

angular.module（'app'，[]）
.控制器（'c1'，功能（$scope）{
$scope.isActive=[false，false，false]；
$scope.toggleActive=函数（索引）{
对于（变量i=0，len=$scope.isActive.length；i
.active{
颜色：红色；
}

第一：
123
456
789
第二：
123
456
789
使用ng重复：
{{item}}
您可以通过几种方法来实现这一点


angular.module（'app'，[]）
.控制器（'c1'，功能（$scope）{
$scope.isActive=[false，false，false]；
$scope.toggleActive=函数（索引）{
对于（变量i=0，len=$scope.isActive.length；i
.active{
颜色：红色；
}

第一：
123
456
789
第二：
123
456
789
使用ng重复：
{{item}}
感谢您的快速回复！你能解释一下这行的作用吗：$scope.activeIndex=$scope.isActive？索引：-1@这是三元运算符。如果
$scope.isActive
为true，则返回index，否则返回-1，并设置为
$scope.activeIndex
，但在何处定义索引变量？@Tushar
$scope.activeIndex=index将被删除enough@Deka87，但此解决方案无法解决我想在单击的容器中切换一个“活动”类，并从其他容器中删除该活动类，如果您激活了任何项目，则下一次单击-只需全部不激活谢谢您的快速回复！你能解释一下这行的作用吗：$scope.activeIndex=$scope.isActive？索引：-1@这是三元运算符。如果
$scope.isActive
为true，则返回index，否则返回-1，并设置为
$scope.activeIndex
，但在何处定义索引变量？@Tushar
$scope.activeIndex=index将被删除enough@Deka87，但此解决方案无法解决我想在单击的容器中切换“活动”类，并从其他容器中删除活动类，如果您激活了任何项目，下一次任何单击-只需全部不激活您知道如何将全部切换为活动。为什么不使用isActive以外的另一个变量来切换其他两个变量？这就是全部密码吗？你用的是重复的吗？您是否有任何其他标识符可用于div？如果您对isActive使用一个标志，您希望如何确定哪个元素是active？您知道如何将所有元素切换为active。为什么不使用isActive以外的另一个变量来切换其他两个变量？这就是全部密码吗？你用的是重复的吗？您还有其他可以在div上使用的标识符吗？如果您对isActive使用一个标志，您希望如何确定哪个元素是active的？但这也不是切换：-）只是始终打开，所以如果您在一个元素上单击两次-它不会切换，但始终处于活动状态以便大声呼喊！我现在仍然坚持这个解决方案。你可以检查我的答案，可能会有帮助，但这也不会切换：-）只是一直打开，所以如果你在一个元素上单击两次-它不会切换，但总是为大声呼喊而激活！无论如何，我现在仍然坚持这个解决方案。你可以检查我的答案，可能会有帮助
<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;
}