无法使用纳克级

我停留在很长很长一段时间，现在我真的需要帮助的角度来应用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

无法使用纳克级

回答

相关问题