ng單擊以撤消事件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. 並通過更改其類來重置該元素及其旁邊所有元素的顏色

請記住，必須重置當前代碼旁邊的所有節點的顏色，否則它將看起來不像Progress 。 看起來就像開關按鈕

如果遇到一些錯誤，可以再次發布代碼

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