单击以撤消事件AngularJs

Question

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

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

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

Answer 2

为什么不遵循此算法并编写一些代码，

1. 编写一个常用功能来重置颜色

2. 通过ng-click调用该函数并获取当前单击的元素

3. 并通过更改元素

重置该元素的颜色及其旁边的所有元素

请记住必须重置当前代码旁边所有节点的颜色，否则它将不会像进度。它看起来就像开关按钮

如果您遇到错误，可以再次发布代码

Answer 3

HTML

 <i class="circle1" id ="circle1" ng-click="changeColor()">1</i>

JS代码：

$scope.changeColor= function() {
    var i=0
    if(i%2 ==0)
    {
    document.getElementbyID('circle1').style.background ="original color"
    }
    else
    {
    document.getElementbyID('circle1').style.background ="green"
    }
  };