如何在AngularJs中旋转图像答案

【问题标题】：How can I rotate image in AngularJs如何在AngularJs中旋转图像
【发布时间】：2016-07-20 20:58:36
【问题描述】：

这是我的代码：如何在元素框单击时仅旋转带有角度的 svg 箭头？

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>

Here is my button

【问题讨论】：

使用 ng-class 应用一个类并做 css transform: rotate?甚至可以使用动画

标签： angularjs angularjs-material

【解决方案1】：

当你的按钮被点击时，你在控制器中处理它并添加一个类

看看this

控制器：

$scope.todoClicked = function(id) {
console.log("clicked", id);
if (!$scope.showMoreTab[id]) {
  $scope.showMoreTab[id] = true;
  angular.forEach($scope.todos, function(todo) {
    if (id !== todo.id) {
      $scope.showMoreTab[todo.id] = false;
    }
  });
} else {
  $scope.showMoreTab[id] = false;
  }
}

查看：

<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-click="todoClicked(todo.id)" ng-class="{'toggled':showMoreTab[todo.id]}">
          <i class="material-icons">
            keyboard_arrow_down</i>
        </md-button>

CSS：

.md-toggle-icon.toggled {
  -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}

我在这里使用了一个图标，但你也可以尝试使用 svg。

<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-class="{'toggled':showMoreTab[todo.id]}" ng-click="todoClicked(todo.id)">
                            <md-icon md-svg-src="/material-design-icons/navigation/svg/design/ic_expand_more_36px.svg">
                            </md-icon>
                        </md-button>

【讨论】：

【解决方案2】：

当按钮被点击时，使用 ng-class 来切换一个类。然后在css中使用这个类来旋转图片。

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" ng-class="{'rotate': rotateImg}" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)" ng-click="rotateImg = !rotateImg">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>


.rotate {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

【讨论】：

使用角度工具的伟大而简单的解决方案。正是我需要的。