How increase image size with ng-click on angular js?

Question

I need to add an ng-click function on image, when I click on it is must increase size and after when I left the mouse over come back to original size.

with css i have create this and run good when put mouse on image

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

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

on the html i have

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

i don't know what i must write on changeSize for change the size of image when i click on it.

I'd like to use ng-click event, how can call into function changeSize the css values ?

thanks.

Answer 1

The function needs to be in your controller.

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"  />

And in your controller :

$ctrl.littleSize = true;

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