[英]How to make only one container active at the same time with Angular JS
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. 我有一个angular js应用程序,我想在一个单击的容器上切换一个“活动”类,并从其他容器中删除该活动类,即,只有一个容器应同时处于活动状态。 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? 是否可以指定单击的容器的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 ;
}
You can use index
: 您可以使用index
:
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>
Javascript: In controller Javascript:在控制器中
$scope.isActive = false;
$scope.toggleActive = function (index) {
$scope.isActive = !$scope.isActive;
$scope.activeIndex = $scope.isActive ? index : -1;
};
Demo: http://jsfiddle.net/tusharj/z7urh4vf/ 演示: http : //jsfiddle.net/tusharj/z7urh4vf/
OK, I came up with the following solution as Grundy suggested. 好的,我想出了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;
}
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.