Jak dodać klasę po kliknięciu do elementu nadrzędnego w AngularJS?

Question

Moje HTML jest w następujący sposób:

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

Po kliknięciu <i>, chcę dodać klasę active do rodzica, który ma .cell komunikatu. Jak to zrobić z AngularJS?

Answer 1

OK, według ostatniego komentarza, jeśli komórki są w pętli powinieneś o tym wspomnieć w swoim pytaniu. Zakładam, że używasz powtórzenia ng.

Mam coś takiego, co działa. Klasa active również zostanie usunięta, jeśli klikniesz inną.

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> 

Kontroler:

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

Answer 2

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

Answer 3

Oto jeden ze sposobów, za pomocą 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> 

kontroler:

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

Answer 4

Można to zrobić tutaj: 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> 

Można by użyć klasy : boolean wzorzec dla wyrażenia klasy ng.

A w kontrolerze:

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

UPDATE:

Jeśli chcesz zrobić przełącznik:

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