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

您可以切换$ scope.advanceSearchToggle值以查看它是否是高级搜索并使用ng-class设置相关类

<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-class执行此操作。

此处.bigSearch类仅在adSearch == true：

时应用

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

.bigSearch {
    height: 900px;
}

<强> Demo in JSFiddle

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

3 个答案: