angularjs - AngularJSの親要素にクリックでクラスを追加するにはどうすればよいですか?

Question

私のHTMLは次のとおりです。

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

をクリックすると、現在持っている親にクラスを<i>追加したい。これはAngularJSでどのように実行できますか?active.cell

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

Answer 2

これが1つの方法です。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;
    }             
}

Answer 3

ここからこれを行うことができます: 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-class 式には class:boolean パターンを使用します。

そしてあなたのコントローラーで：

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

アップデート：

ラジオボタンをしたい場合：

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

Answer 4

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