Hala El Barchah Hala El Barchah - 3 months ago 17
AngularJS Question

identify the clicked button in AngularJs : solved

In the snippet bellow, if you click one of the buttons, then all three buttons will re-act and rotate with the clicked one.

How can I rotate only the clicked one? I tried to pass unique id of each button to

rotate()
function, but all what I tried have failed.

And if there is one rotated (active) button, how can I make sure that the others are not rotated (not active)?



angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){
$scope.isActive = false;
$scope.rotate = function () {
$scope.isActive = !$scope.isActive;
};
})

.rotate,
.rotateCounterwise {
-webkit-transition: 300ms ease all;
-moz-transition: 300ms ease all;
-o-transition: 300ms ease all;
transition: 300ms ease all;
}
.rotate {
-webkit-transform: rotate(-90deg);
}
.rotateCounterwise {
-webkit-transform: rotate(0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="main">
<button ng-click="rotate()"
ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
style="cursor:pointer; border: 2px solid; border-radius: 17%;">
Click
</button>
<button ng-click="rotate()"
ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
style="cursor:pointer; border: 2px solid; border-radius: 17%;">
Click
</button>
<button ng-click="rotate()"
ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
style="cursor:pointer; border: 2px solid; border-radius: 17%;">
Click
</button>
</div>




Answer

Alternate way to define three different flags

angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){ 
   $scope.isActive = false;
})
.rotate,
    .rotateCounterwise {
        -webkit-transition: 300ms ease all;
        -moz-transition: 300ms ease all;
        -o-transition: 300ms ease all;
        transition: 300ms ease all;
    }
    .rotate {
        -webkit-transform: rotate(-90deg);
    }
    .rotateCounterwise {
        -webkit-transform: rotate(0deg);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="main">
  <button  ng-click="isActive=!isActive;isActive1=false; isActive2=false; "
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="isActive1=!isActive1; isActive=false;isActive2=false;"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive1]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="isActive2=!isActive2; isActive=false;isActive1=false;"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive2]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
           Click
  </button>
</div>