Получить идентификатор нажатой кнопки только в Angular Js

0

В сниппете ниже, если вы нажмете одну из кнопок, то все три кнопки будут повторно действовать и вращаться с помощью щелчка.

Как я могу повернуть только щелкнув? Я попытался передать уникальный идентификатор каждой кнопки для функции rotate(), но все, что я пробовал, потерпело неудачу.

И если есть одна вращающаяся (активная) кнопка, как я могу убедиться, что остальные не вращаются (не активны)?

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>
  • 0
    Ну, вы получаете цель ng-click="rotate($event)" ... но если это поможет, я не знаю. может быть, вы могли бы передать идентификатор ... или установить его самостоятельно <button id=""> ... но тогда мы снова находимся в $ event.target
  • 0
    Я попробовал это, и я получил идентификатор нажатой кнопки, но потом я не знал, как обработать и использовать его с моделью isActive чтобы противоположно ее состоянию (повернуть, чтобы не повернуть) @Daniel
Показать ещё 2 комментария
Теги:
angularjs-scope
angularjs-ng-click

2 ответа

4
Лучший ответ

Альтернативный способ определения трех разных флагов

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>
Поделиться
  • 0
    Да, это подходящий способ решить проблему.
  • 0
    Да, это то, что я хочу, спасибо. Вы можете решить вторую часть вопроса? And if there is one rotated (active) button, how can I make sure that the others are not rotated (not active)?
Показать ещё 4 комментария
1

Вместо жесткого кодирования каждого элемента кнопки вы можете определить список объектов кнопок в вашем контроллере, где каждый объект имеет флаг 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;
};

Чтобы переключить фактический класс css, вы используете поле button.isActive например:

<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>
Поделиться
  • 0
    На самом деле, я не могу использовать ng-repeat потому что между кнопками много элементов. скажем, мне нужно написать каждую кнопку вручную, чтобы я мог назначить идентификатор каждой, но как я могу передать этот идентификатор функции rotate() и использовать ее ~

Ещё вопросы

Сообщество Overcoder
Наверх
Меню