如何通過點擊角度js來增加圖像大小？

Question

我需要在圖像上添加一個ng-click函數，當我點擊它時必須增加尺寸，並且在我將鼠標移回原始尺寸之後。

用CSS我已創建這一點，並在HTML放在圖像

.images img{ 
    float: left; 
    height: 100px; 
    width: 100px; 
} 

.images img:hover{ 
width: 30%; 
height: 30%%; 
transition: width 2s, height 4s 
} 

鼠標時運行良好，我有

<img ng-click="$ctrl.changeSize(img)" ng-src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 

我不知道我必須在changeSize寫變革當我點擊它時圖像的大小。

我想用ng-click事件，怎樣才能調用函數changeSize的css值呢？

謝謝。

Answer 1

該功能需要在您的控制器中。

function toggleSize() { 
    angular.element(document).find('#img-responsive').css({ 'width': '30%', 'height': '30%' }); 
} 

<img id="img-responsive" ng-click="$scope.toggleSize()" ng-src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 

Answer 2

<img ng-click="$ctrl.toggleSize()" ng-class="{little: $ctrl.littleSize, big: !$ctrl.littleSize}" ng-src="https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 

而在你的控制器：

$ctrl.littleSize = true; 

$ctrl.toggleSize = function() { 
    $ctrl.littleSize = !$ctrl.littleSize; 
}