機能が呼び出されたときの背景イメージとその高さの変更方法

Question

私は検索ページを持っており、事前検索オプションがあります。事前検索オプションにアクセスできるユーザーはごくわずかです。だから私のdivの高さはそれに応じて増加する必要がありますまた、私はより大きなサイズに私の背景イメージを変更する必要があります。どうすればこれを達成できますか？

AngularJS：

$scope.advanceSearch = function(){ 
    $scope.adSearch=true; 
    $scope.freeSearch = false; 
    $scope.showAdvance = "true"; 
}; 

HTML：

<div class="row advanceFilter"> 
    <a class="aFStyle" ng-click="advanceSearch();">ADVANCE SEARCH</a> 
</div> 

CSS：

.searchPhoto{ 
    background-image: url("assets/images/searchbg.jpg"); 
    background-repeat: no-repeat; 
    font-family: Monserrat-Regular; 
    background-size: cover; 
    height: 600px; 
    width:1349px; 
} 

事前検索が.searchPhotoが異なる画像Searchmore.jpgとし、height:900px;どのようにすることができますと一緒にクリックされた後、これを達成するには？

Answer 1

ngClassディレクティブを使用して、CSSクラスを動的に設定します。

<div class="row advanceFilter" ng-class="{ \'searchPhoto\': !showAdvance}"> 
    <a class="aFStyle"ng-click="advanceSearch();">ADVANCE SEARCH</a> 
</div> 

Answer 2

あなたはそれが

<style> 
    .searchPhoto { 
    background-image: url("assets/images/searchbg.jpg"); 
    background-repeat: no-repeat; 
    font-family: Monserrat-Regular; 
    background-size: cover; 
    height: 600px; 
    width: 1349px; 
    } 
    .searchPhotoAdvanced { 
    background-image: url("assets/images/searchAdvancedbg.jpg"); 
    background-repeat: no-repeat; 
    font-family: Monserrat-Regular; 
    background-size: cover; 
    height: 900px; 
    width: 1349px; 
    } 
</style> 
<div class="row advanceFilter ng-class=" {advanceSearchToggle? 'searchPhotoAdvanced': 'searchPhoto'} "> 
     ... 
</div>                          


$scope.advanceSearchToggle = false; 
$scope.advanceSearch = function() { 
    $scope.adSearch = true; 
    $scope.freeSearch = false; 
    $scope.showAdvance = "true"; 
    $scope.advanceSearchToggle = !$scope.advanceSearchToggle; 

}; 

Answer 3

関連するクラスを設定するために、事前検索し、使用NG-クラスである場合は、ng-classでトリックを行うことができます参照してください$ scope.advanceSearchToggle値を切り替えることができます。

ここ.bigSearchクラスは、ときにのみ適用されadSearch == true：

<div class="searchPhoto" ng-class="{bigSearch: adSearch}"> 
    Search photo 
</div> 

.bigSearch { 
    height: 900px; 
} 

Demo in JSFiddle