仅在Angular Js中获取单击按钮的ID

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.

如何只旋转点击的一个？我试图将每个按钮的唯一ID传递给rotate（）函数，但我尝试的所有内容都失败了。

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>

2 个解决方案

#1

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>

#2

Instead of hard coding each button element you can define a list of button objects in your controller, where each object has a isActive flag. You can then use ng-repeat to create each of the button elements.

您可以在控制器中定义按钮对象列表，而不是对每个按钮元素进行硬编码，其中每个对象都有一个isActive标志。然后，您可以使用ng-repeat创建每个按钮元素。

Example

例

$scope.buttons = [
 {
   text: 'Click',
   isActive: false
 },
 {
   text: 'Click2',
   isActive: false
 },
 {
   text: 'Click3',
   isActive: false
 }
]

Now each button can be identified by an index in the array and passed into the $scope.rotate function.

现在，每个按钮都可以通过数组中的索引进行标识，并传递给$ scope.rotate函数。

<button 
   ng-repeat="button in buttons track by $index"
   ng-click="rotate($index)"
   ...
</button>

And then you can update the $scope.rotate function to toggle the isActive flag to the button object by using the passed in index parameter.

然后，您可以使用传入的index参数更新$ scope.rotate函数以将isActive标志切换到按钮对象。

$scope.rotate = function (index) {
   $scope.buttons[index].isActive = !$scope.buttons[index].isActive;
};

To toggle the actual css class you use the button.isActive field like so:

要切换实际的css类，请使用button.isActive字段，如下所示：

<button
   ...
   ng-class="{true: 'rotate', false: 'rotateCounterwise'}[button.isActive]"
</button>

Updated your snippet, but here's a jsbin example too: http://jsbin.com/vajolokifa/edit?html,css,js,output

更新了您的代码段，但这里也是一个jsbin示例：http：//jsbin.com/vajolokifa/edit？html，css，js，output

angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){
  
   $scope.buttons = [
     {
       text: 'Click',
       isActive: false
     },
     {
       text: 'Click2',
       isActive: false
     },
     {
       text: 'Click3',
       isActive: false
     }
   ];
   
   $scope.rotate = function (index) {
      $scope.buttons[index].isActive = !$scope.buttons[index].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);
    }

<div ng-app="myApp" ng-controller="main">
  
  <button  ng-repeat="button in buttons track by $index"
           ng-click="rotate($index)"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[button.isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
           {{button.text}}
  </button>
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
</div>