javascript - ng-click 以撤消事件 AngularJs

Question

我们的想法是创建一个 list 。当用户单击圆圈时，它会更改其背景颜色。如果他再次点击它，它应该会重置颜色。

当用户这样检查他的进度时，我设法将背景更改为绿色:

<i class="circle1" 
   ng-style="myStyle1" 
   ng-click="myStyle1={'background-color':'green'}">1</i>

现在我的问题是如何在用户再次点击时将颜色重置为白色？

感谢您的帮助。

Answer 1

一种选择是引入一个 css 类，当您单击该元素时，该类会切换。您可以结合使用 ng-class 和使用 ng-click 来切换变量。

<i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>

angular.module("app", []);

.circle1 {
  background: red;
}

.green-circle {
  background: green;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <i class="circle1" ng-class="{'green-circle': isToggled === true}" ng-click="isToggled = !isToggled">1 - {{isToggled}}</i>
</div>  

此解决方案的缺点是您需要为每个圆圈设置不同的 isToggled 变量。一个更好、更可重用的解决方案是创建一个指令来处理这个问题:

var app = angular.module("app", []);

app.directive('toggleClass', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('click', function() {
        element.toggleClass(attrs.toggleClass);
      });
    }
  };
});

.circle1 {
  background: red;
}
.green-circle {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <i class="circle1" toggle-class="green-circle">One</i>
  <i class="circle1" toggle-class="green-circle">Two</i>
  <i class="circle1" toggle-class="green-circle">Three</i>
</div>