如何在单击子按钮时将 "active" class 添加到 "this" 父级并在再次单击按钮时切换 "active" class

Question

除了我需要的另一件事之外，下面给出的代码工作正常。

HTML:

<div class="item" ng-repeat="cell in [0,1,2]" data-ng-class="{active:index=='{{$index}}'}">
    <button data-ng-click="activate('{{$index}}')">Activate Me</button>
</div>

控制器：

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

以上代码的作用如下：

如果单击子项，active class 将添加到父项 div。
如果您单击另一个项目，active class 也会被删除。

我需要的一项附加功能是： 如果再次单击同一个按钮，则删除已添加到父级 div.

的 active class

Answer 1

这可能有效：

$scope.activate= function(index){
      if($scope.index == index)
          $scope.index = -1;
      else
          $scope.index = index;
};

Answer 2

您不应将字符串文字传递给函数。改为传递 $index 的值：

  <div class="item" ng-repeat="cell in [0,1,2]" data-ng-class="{'active': index == $index}">
    <button data-ng-click="activate($index)">Activate Me</button>
  </div>

并且在您的控制器中，如果 $index 与您的 $scope.index:

相同，则将 $scope.index 设置为 -1

 $scope.activate = function(index) {
    if (index === $scope.index) {
      $scope.index = -1;
    } else {
      $scope.index = index;
    }
  };

工作计划：https://plnkr.co/edit/WtkWQLcPBy5rC4Q0xNck?p=preview

Answer 3

angular
  .module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.index = -1;
    $scope.toggle = function(index) {
      if ($scope.index == index) {
        $scope.index = -1;
      } else {
        $scope.index = index;
      }

    };
  });

.active {
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

  <div class="item" ng-repeat="cell in [0,1,2]" ng-class="{'active': index == $index}">
    <button data-ng-click="toggle($index)">
      Activate Me
    </button>
  </div>

</body>

</html>

如何在单击子按钮时将 "active" class 添加到 "this" 父级并在再次单击按钮时切换 "active" class

How to add "active" class to "this" parent on child button is clicked and toggle "active" class if button clicked again

javascript

angularjs

angularjs-ng-click