动态更改控制高度
问题描述:
我正在使用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。 如何解决这个问题?
答
如果我理解你的权利,你应该使用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;
}
当然还有其他几种方法可以做到这一点。
答
试试这个
$('#imgHolder').css('height', '100px !important');
请考虑解释答案。不鼓励使用仅有代码的答案 – ADyson