ng-classを使用してAngularでCSSを適用できません

Question

私は長い間長い間それに執着しており、本当に助けが必要です。私は、ボタンのクリックで表示したいdivセクションを持っています。私はCSSクラスを使用しています。ここで

は

<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は私のコントローラからの値に変更されたDIVセクションです。 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を適用しません。しかし、もし私が 'expandCollapsedMenu'であるclassnameを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クラスは、例えば

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

として使用されます

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

と括弧を必要とvm.showVerticalBannerあなたの関数呼び出し。

コントローラを使用して、式に基づいて適用されるクラス名を変更します。クリックすると、vm.toggleClasses機能が呼び出されます。あなたがcollapsedMenuAvailableクラスを適用する場合は

すなわちその後

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

とコントローラのように何かをする：

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

}