我已经坚持了很长时间,我真的需要帮助。我有一个div部分,我想在单击按钮时显示它。为此,我使用CSS类。
这是DIV部分
<div class="elen-main--left-menu--collapsed " ng-class="collapsedMenuAvailable">
<div class="icon-propal icon_active">
<img src="content/img/icon_propal_white.svg" alt="" width="18" />
</div>
<div class="icon-contrat">
<img src="content/img/icon_contrat_grey.svg" alt="" width="18" />
</div>
<div class="left--menu--expand" ng-click="vm.showVerticalBanner">
<img src="content/img/arrow-expandMenu-grey.svg" alt="" width="13">
</div>
</div>
crashdMenuAvailable更改为我的控制器中的值。
控制器
vm.hideVerticalBanner = function () {
$scope.collapsedMenuAvailable = 'expandCollapsedMenu';
$('.elen-main--left-menu').addClass('collapseLeftMenu');
$('.elen-main--left-menu').css('overflow', 'hidden');
setTimeout(function () {
// $('.elen-main--left-menu--collapsed').addClass('expandCollapsedMenu');
$('.elen-main--content').css('width', 'calc(100% - 6rem)');
}, 200);
$('.elen-main--left-menu').removeClass('expandLeftMenu');
$('.elen-main--left-menu--collapsed').removeClass('collapseCollapsedMenu');
}
但是它仍然不适用CSS。但是,如果我在div部分中输入了名为“ expandCollapsedMenu”的类名,则会应用CSS。
可能是什么问题?
最佳答案
以下情形说明了ng-class
的工作方式。该类应该是第一个,之后可以有一个可选条件。
var app =angular.module("myapp", [])
app.controller("ctrl", function($scope){
$scope.isClass = false;
$scope.hide = function(){
$scope.isClass=!$scope.isClass;
}
})
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="parent" ng-app="myapp" ng-controller="ctrl">
<button ng-click="hide()">Toggle</button>
<div style="background-color:red;width:100px;height:100px" ng-class="{hidden:isClass}">
</div>