Unable to apply CSS in Angular using ng-class

Question

I am stuck at it for a long long time now and I really need help. I have a div section which I want to display on the click of a button. For which I use CSS classes.

Here is the DIV section

    <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 is changed to the value from my controller. 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');
            }

But still it doesn't apply the CSS. However if I put the classname which is 'expandCollapsedMenu' in the div section, the CSS is applied.

what is possibly wrong ?

Answer 1

The below scenario explains how the ng-class is working. The class should be first and you can have an optional condition following that.

 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 is used as

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

eg

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

and your function call vm.showVerticalBanner needs parenthesis.

Use your controller to change the class names, which will be applied based on the expression. On ng-click call vm.toggleClasses function.

ie if you want to apply collapsedMenuAvailable class then do something as

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

and in controller:

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

}