如何在Click中添加一个类到AngularJS中的父元素？

My HTML is as follows:

我的HTML如下:

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

When you click the <i>, I want to add an active class to the parent that has .cell currently. How is this doable with AngularJS?

当您单击时,我想将活动类添加到当前具有.cell的父级。如何使用AngularJS?

4 个解决方案

#1

OK, according to your last comment, if your cells are in a loop you should have mentioned that in your question. I'm gonna assume you use ng-repeat.

好的,根据你的上一条评论,如果你的细胞处于循环中,你应该在你的问题中提到过。我假设你使用ng-repeat。

I have something like this which works. The active class also get removed if you click another.

我有这样的东西有效。如果单击另一个活动类,也会删除活动类。

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>

Controller:

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

#2

Here is one way, using ng-class

这是一种使用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>

controller:

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

#3

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

#4

You can do this from here: http://docs.angularjs.org/api/ng.directive:ngClass

你可以从这里做到这一点: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>

You would use a class:boolean pattern for the ng-class expression.

您将为ng-class表达式使用class:boolean模式。

And in your controller:

在你的控制器中:

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

UPDATE:

If you want to do a radio button:

如果你想做一个单选按钮:

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

#1