如何在点击添加一个类到AngularJS的父元素？

我的HTML如下：如何在点击添加一个类到AngularJS的父元素？

<div class="cell"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()"></i> 
    </div> 
</div>

当您单击<i>，我想一个active类添加到具有.cell当前父。这对于AngularJS是如何实现的？

来源

2013-10-04 Shamoon

只是建议一个快字：下次不问1个问题，然后问又在一些注释，尤其是当你似乎已经知道你有两个问题。把它们放在原来的文章中，这样人们可以帮助你更轻松。 –

OK，根据你过去的评论，如果你的细胞在一个循环中，你应该在你的问题中提到这一点。我会假设你使用ng-repeat。

我有这样的工作。如果您点击另一个，active类也会被删除。

HTML：

<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}"> 
    <div class="offset-container pull-left"> 
     <i data-ng-click="activate($index)">Activate Me</i> 
    </div> 
</div>

控制器：

$scope.activate= function(index){ 
     $scope.index=index; 
    };

来源

2013-10-04 16:33:17 NicolasMoise

你摇滚！谢谢，这正是我需要的 – Shamoon

@NicolasMose有没有办法删除活动类，如果再次点击相同的按钮（切换类 - 添加和删除）？ – Syed

@NicolasMose我按照上面的要求对代码进行了更改。我在这里得到了答案：http：// stackoverflow。com/questions/38620253/how-to-add-active-class-this-parent-on-child-button-is-clicked-and-toggle – Syed

<div class="cell" ng-class="{'active': isActive}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="isActive = !isActive"></i> 
    </div> 
</div>

来源

2013-10-04 16:06:15 Max

这里有一种方法，使用ng-class

<div class="cell" ng-class="{'active': isActive==true}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()">clicky</i>  
    </div> 
</div>

控制器：

function MyCtrl($scope) { 
    $scope.doCtrlStuff = function(){ 
     $scope.isActive = true; 
    }    
}

来源

2013-10-04 16:09:31 kmdsax

如何在单击一个单元格时将所有其他单元格设置为不活动？ – Shamoon

取决于你的代码是如何设置的。你可以添加你的示例代码，以便我们可以确切地看到你正在尝试完成什么？ – kmdsax

从这里你可以这样做：http://docs.angularjs.org/api/ng.directive:ngClass

<div data-ng-class="{cell:true, active:clickedIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCtrlStuff()"></i> 
    </div> 
</div>

你可以使用一个类：布尔ng类表达式的模式。

而在你的控制器：

$scope.doCtrlStuff = function() { 
    $scope.clickedIcon = true; 
}

UPDATE：

如果你想要做一个单选按钮：

<div data-ng-class="{cell:true, active:clickedDogIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doDogStuff()"></i> 
    </div> 
</div> 
<div data-ng-class="{cell:true, active:clickedCatIcon}"> 
    <div class="offset-container pull-left"> 
    <i data-ng-click="doCatStuff()"></i> 
    </div> 
</div> 

$scope.doDogStuff = function() { 
    $scope.clickedDogIcon = true; 
    $scope.clickedCatIcon = false; 
} 
$scope.doCatStuff = function() { 
    $scope.clickedDogIcon = false; 
    $scope.clickedCatIcon = true; 
}

来源

2013-10-04 16:11:30 programmerdave

如何从其他'cell's中删除'active'类？ – Shamoon

我会为每个家长有一个不同的变量。所以你可以做clickedIcon1，clickedIcon2等等，并将其他设置为false，这样ng-class会在它们为false时删除这个类。 – programmerdave

'细胞'是在一个循环。所以我不能做的1,2,3等方法 – Shamoon

如何在点击添加一个类到AngularJS的父元素？

回答

相关问题