Hala El Barchah Hala El Barchah - 1 year ago 45
Javascript Question

Get the ID of clicked button only in Angular Js

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 Source

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>