Question

我的HTML如下：

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

当您点击<i>时，我想向当前active的父级添加.cell课程。如何使用AngularJS？

Answer 1

好的，根据你的上一条评论，如果你的细胞处于循环中，你应该在你的问题中提到过。我假设你使用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

以下是使用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

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

Answer 4

您可以从此处执行此操作：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表达式。

在你的控制器中：

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

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

4 个答案: