[英]Unable to apply CSS in Angular using ng-class
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. 我有一个div部分,我想在单击按钮时显示它。 For which I use CSS classes. 为此,我使用CSS类。
Here is the DIV section 这是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 is changed to the value from my controller. crashdMenuAvailable更改为我的控制器中的值。 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. 但是它仍然不适用CSS。 However if I put the classname which is 'expandCollapsedMenu' in the div section, the CSS is applied. 但是,如果我在div部分中输入了名为“ expandCollapsedMenu”的类名,则会应用CSS。
what is possibly wrong ? 可能是什么问题?
The below scenario explains how the ng-class
is working. 以下方案说明了ng-class
的工作方式。 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>
ng-class is used as ng-class用作
ng-class="{'classname' : 'angular expression'}"
eg 例如
ng-class="{'collapsedMenuAvailable' : true }"
and your function call vm.showVerticalBanner
needs parenthesis. 并且您的函数调用vm.showVerticalBanner
需要括号。
Use your controller to change the class names, which will be applied based on the expression. 使用您的控制器来更改将基于表达式应用的类名称。 On ng-click call vm.toggleClasses
function. 在ng上单击以调用vm.toggleClasses
函数。
ie if you want to apply collapsedMenuAvailable
class then do something as 即,如果您想应用collapsedMenuAvailable
类,请执行以下操作
ng-class="{'collapsedMenuAvailable' : $scope.shouldApplyCollapsedMenuAvailable,
'collapseCollapsedMenu' : $scope.shouldApplycollapseCollapsedMenu}"
and in controller: 并在控制器中:
vm.toggleClasses = function () {
$scope.shouldApplycollapseCollapsedMenu = !$scope.shouldApplycollapseCollapsedMenu;
$scope.shouldApplyCollapsedMenuAvailable = !$scope.shouldApplyCollapsedMenuAvailable;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.