Html 调用函数时如何更改背景图像及其高度

我有一个搜索页面，我有一个高级搜索选项。只有少数用户可以访问高级搜索选项。因此，我的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>

单击“高级搜索”后，

.searchPhoto

将具有不同的图像

Searchmore.jpg

和

高度：900px如何实现这一点？
使用指令动态设置CSS类

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


预先搜索
使用指令动态设置CSS类

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


预先搜索
您可以切换$scope.advanceSearchToggle值，查看它是否为Advanced search，并使用ng类设置相关类

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

};


.搜索照片{
背景图片：url（“assets/images/searchbg.jpg”）；
背景重复：无重复；
字体系列：Monserrat常规字体；
背景尺寸：封面；
高度：600px；
宽度：1349px；
}
.searchPhotoAdvanced{
背景图片：url（“assets/images/searchAdvancedbg.jpg”）；
背景重复：无重复；
字体系列：Monserrat常规字体；
背景尺寸：封面；
高度：900px；
宽度：1349px；
}
您可以切换$scope.advanceSearchToggle值以查看它是否为Advanced search，并使用ng类设置相关类

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

};


.搜索照片{
背景图片：url（“assets/images/searchbg.jpg”）；
背景重复：无重复；
字体系列：Monserrat常规字体；
背景尺寸：封面；
高度：600px；
宽度：1349px；
}
.searchPhotoAdvanced{
背景图片：url（“assets/images/searchAdvancedbg.jpg”）；
背景重复：无重复；
字体系列：Monserrat常规字体；
背景尺寸：封面；
高度：900px；
宽度：1349px；
}
你可以用它来耍把戏

这里，
.bigSearch
类仅在
adSearch==true
时应用：

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

.bigSearch {
    height: 900px;
}


搜索照片
.bigSearch{
高度：900px；
}

你可以用它来玩这个把戏

这里，
.bigSearch
类仅在
adSearch==true
时应用：

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

.bigSearch {
    height: 900px;
}


搜索照片
.bigSearch{
高度：900px；
}

我按照你给出的方式尝试，但对我来说它们是重叠的。请检查演示JSFIDLE。我按照你给出的方式尝试，但对我来说它们是重叠的。请检查演示JSFIDLE。我不理解这种行为。你能详细说明一下吗？我不理解这种行为。你能详细说明一下吗。