コントロールの高さを動的に変更します

Question

私はAngular Jを使用しています。私はチェックボックスを持っています、それを選択すると、私は画像を表示しています。チェックボックスをオフにすると、画像の高さが取られないように高さを下げたいと思う。

私は以下のコードを使用していますが、チェックボックスがオフの場合、高さは減少していません。 CSSで

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

：

.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ピクセルを超えてはなりません。使用可能な画像がない場合、高さは40ピクセルを超えてはなりません。 これを修正するには？

Answer 1

を試してみてください。何も表示されていないので画像要素を表示または非表示にするには、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

は、私はあなたが右に理解していればあなただけの高さに影響を与えるようにしたい場合は、あなたがng-classを使用する必要があり、この1

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