無法使用納克級

我停留在很長很長一段時間，現在我真的需要幫助的角度來應用CSS。我有一個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。但是，如果我在div部分放置'expandCollapsedMenu'的類名，則應用CSS。

什麼可能是錯的？

來源

2017-07-04 Mayank Sharma

什麼風格與'.expandCollapsedMenu'相關：

如果你想申請collapsedMenuAvailable類，然後做一些事情作爲

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

和控制器即？ –

你缺少括號〜'NG點擊=「vm.someFunction（）」' – Phil

很可能它只是在括號 –

以下方案說明如何在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>

來源

2017-07-04 05:36:20

納克級被用作

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

例如

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

和你的函數調用vm.showVerticalBanner需要括號。

使用控制器更改類的名稱，這將基於表達式應用。在ng-click中調用vm.toggleClasses函數。

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

}

來源

2017-07-04 06:43:26 arbghl

無法使用納克級

回答

相關問題