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

尝试这个

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

Answer 2

如果我理解你的话，如果你只想影响身高，你应该使用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;
}

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

动态改变控制高度

2 个答案: