Question

在下面的代码段中，如果您单击其中一个按钮，则所有三个按钮将重新动作并随所单击的按钮一起旋转。

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

如果有一个旋转（活动）按钮，我怎样才能确保其他按钮不旋转（不活动）？

＆＃13;

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

＆＃13;

.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);
    }

＆＃13;

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

＆＃13;

Answer 1

定义三个不同标志的替代方法

＆＃13;

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

＆＃13;

.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);
    }

＆＃13;

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

＆＃13;

Answer 2

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

示例

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

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

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

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

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

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

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

更新了您的代码段，但这里也是一个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>

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

2 个答案: