如何使用 ng-click on angular js 增加图像大小？

Question

我需要在图像上添加一个 ng-click 功能，当我点击它时必须增加大小，当我离开鼠标后恢复原始大小。

使用 css 我已经创建了这个并且在将鼠标放在图像上时运行良好

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

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

在我拥有的 html 上

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