5

我的HTML如下：

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

当您单击 时<i>，我想向当前active具有的父级添加一个类.cell。AngularJS 如何做到这一点？

4

4 回答 4

6

好的，根据您的最后评论，如果您的单元格处于循环状态，您应该在问题中提到这一点。我会假设你使用 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-04T16:33:17.223 回答
2

这是一种方法，使用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-04T16:09:31.990 回答
0

您可以从这里执行此操作：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;
}
于 2013-10-04T16:11:30.350 回答
0 
<div class="cell" ng-class="{'active': isActive}">
  <div class="offset-container pull-left">
    <i data-ng-click="isActive = !isActive"></i>
  </div>
</div>
于 2013-10-04T16:06:15.760 回答