Wie füge ich beim Klicken auf ein übergeordnetes Element in AngularJS eine Klasse hinzu?

Question

Mein HTML ist wie folgt:

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

Wenn Sie das <i> klicken, möchte ich eine active Klasse an die Mutter hinzuzufügen, die .cell derzeit. Wie ist das mit AngularJS machbar? Hier

Answer 1

OK, nach Ihrem letzten Kommentar, wenn Ihre Zellen sind in einer Schleife hättest du das in deiner Frage erwähnen sollen. Ich nehme an, du benutzt ng-repeat.

Ich habe so etwas, was funktioniert. Die Klasse active wird ebenfalls entfernt, wenn Sie auf eine andere klicken.

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

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

ist eine Möglichkeit, mit 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; 
    }    
} 

Answer 4

Sie können dies tun, von hier: 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> 

Sie würden eine Klasse verwenden : Boolescher Wert Muster für den Ausdruck der ng-Klasse.

Und in Ihrem Controller:

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

UPDATE:

Wenn Sie ein Optionsfeld zu tun:

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