动态更改控制高度

Question

我正在使用Angular Js。我有一个复选框，在选择它时，我正在显示一个图像。当复选框未选中时，我想要减小高度，以免拍摄图像高度。

我正在使用下面的代码，但高度没有减少，当复选框未选中时。

<div class="row"> 
    <div class="form-group col-md-8" style="padding-left: 0px !important;"> 
     <label class="control-label col-sm-3"> 
      <input type="checkbox" ng-model="includeImage" ng-checked="true" ng-change="isImageInclude(includeImage)">Include Image 
     </label> 
     <img ng-src="{{seasonTypeImage_url}}" style="padding-left: 20px !important;height:40px" id="imgHolder" alt="image will display here." class="imagerowStyle" /> <br /> 
</div> 

在CSS：

.imagerowStyle{ 
    width:400px; 
    height:150px; 
} 

在controller.cs：

$scope.isImageInclude = function(includeImage) { 
    if ($scope.includeImage) { //If it is checked 
     $scope.seasonTypeImage_url = $scope.selectedseasonType.ImageUrl; 
    } else { 
     $scope.seasonTypeImage_url = _SeasonBaseUrl + "Images//no-imag.png"; 
     jQuery('#imgHolder').css({ height: "40px !important" }); 
    } 
} 

如果任何图像可用，则宽度应不超过400像素，并且高度不应超过150像素。如果没有图像可用，那么高度不应超过40px。 如何解决这个问题？

Answer 1

如果我理解你的权利，你应该使用ng-class如果你只是想影响的高度。如果您想显示或隐藏图像元素，因为没有任何内容，您应该使用ng-hide或ng-show。

<img ng-src="{{seasonTypeImage_url}}" ng-class="includeImage ? 'big400' : 'small50'" /> 

如果includeImage设置为true并根据我们的需要设置类，

而且在你的CSS：

.big400 { 
    height: 400px; 
} 

.small50 { 
    height: 50px; 
} 

当然还有其他几种方法可以做到这一点。

Answer 2

试试这个

$('#imgHolder').css('height', '100px !important');