मैं AngularJs

Question

में छवि को कैसे घुमा सकता हूं यह मेरा कोड है: मैं केवल तत्व बॉक्स पर कोणीय के साथ svg-arrow को घुमा सकता हूं?

<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

Answer 1

उपयोग एनजी श्रेणी एक वर्ग बटन क्लिक होने टॉगल करने के लिए। फिर छवि को घुमाने के लिए इस वर्ग का उपयोग सीएसएस में करें।

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

Answer 2

जब आपके बटन क्लिक आप नियंत्रक में इसे संभाल और एक वर्ग

जोड़ने 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> 

सीएसएस:

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