All geek questions in one place

How can I rotate an image in AngularJs

Here is my code: how can I only rotate the svg arrow using angular in the element field?

<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

+5
source share
2 answers

Use the ng class to switch the class when a button is clicked. Then use this class in css to rotate the image.

 <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); }
+11
source

When you click a button, you process it in the controller and add a class

Look this

Controller:

 $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; } }

View:

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

I use the icon here, but you can also try it with 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>
0
source

Source: https://habr.com/ru/post/1246207/

More articles:


All Articles