Question

我现在已经坚持很久了，我真的需要帮助。我有一个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>

collapsedMenuAvailable已更改为我的控制器中的值。 CONTROLLER

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。但是如果我把类名是＆＃39; expandCollapsedMenu＆＃39;在div部分中，应用了CSS。

可能有什么不对？

Answer 1

以下方案说明了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>

Answer 2

ng-class用作

ng-class="{'classname' : 'angular expression'}"

e.g。

ng-class="{'collapsedMenuAvailable' : true }"

并且您的函数调用vm.showVerticalBanner需要括号。

使用您的控制器更改将根据表达式应用的类名。在ng-单击调用vm.toggleClasses函数。

即如果你想申请collapsedMenuAvailable课程，那就做一些

ng-class="{'collapsedMenuAvailable' : $scope.shouldApplyCollapsedMenuAvailable, 
'collapseCollapsedMenu' : $scope.shouldApplycollapseCollapsedMenu}"

并在控制器中：

vm.toggleClasses = function () {
$scope.shouldApplycollapseCollapsedMenu = !$scope.shouldApplycollapseCollapsedMenu;
$scope.shouldApplyCollapsedMenuAvailable = !$scope.shouldApplyCollapsedMenuAvailable;

}

无法使用ng-class在Angular中应用CSS

2 个答案: