I am newbie for angular. I want to apply condition in ng class for particular classes.
Here is code:-
<div class="main-tb-div tab-pane fade in active" id="fdDiv">
I want add in and active classes dynamically.
Somethings like:-
<div ng-class="advisory-tab-n tab-pane fade {'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}" id="fdDiv">
You can do this:
Add all static classes in class and dynamic class in ng-class.
<div class="advisory-tab-n tab-pane fade" ng-class="{'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}" id="fdDiv">
You need to use an array:
<div ng-class="['advisory-tab-n', 'tab-pane', 'fade', {'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}]" id="fdDiv">
See here for more info.
Related
Well there are two list options in my code - Monthly and quarterly
I have one class "active" which generally highlights the element.
I need class "active" should be applied to one of the options when they are clicked or selected. Here class=active is applied to only Monthly manually.
Looking for Angular solution for this.
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" data-ajax="false" **class=active**>Monthly</a></li>
<li>Quarterly</li>
</ul>
</div>
Use ng-class directive like in a code below.
<div class="list">
<p class="subheader secondary">Select Preferred View</p>
<ul class="tabs">
<li><a href="#monthly" ng-click="type='month'" ng-class="{'active' : type=='month'}" data-ajax="false" **class=active**>Monthly</a></li>
<li>Quarterly</li>
</ul>
</div>
It adds specified class when expression given after classname evaluates to true and removes it when it evaluates to false.
ng-class="{'classname' : expression}"
You can set a default value in a controller:
$scope.type = 'month';
or via ng-init directive on div:
<div class="list" ng-init="type='month'">
jsfiddle with example
jsfiddle with setting default in ng-init
Is it possible to add a complex class to a div like this:
<div class="{{'border-wrp'}} {{pageType}} {{borderStyleClass}} {{borderColourClass}}" > </div>
THanksss
ng-class is used to add classes conditionally.
Like this
<div ng-class="{'yourclass':true,'yourclass1':false}"></div>
I am doing Angularjs project and I need to freeze a div in that depend on a condition. I tried to use ng-disabled but Its not freezing a div for me. This is the code
<div ng-repeat="item in list.items" ng-disabled="true">
Help would be really appreciated.
Edited :
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
now I have another problem, As you guys suggested me I can change the css. But the problem is every div has got a ng-click So even if it is look like disabled in css it will call to the function. So how can I prevent it?
Thanks in Advanced.
if you are using bootstrap3, you can use text-muted class if the div contains text and apply styles based on a condition
<div ng-repeat="item in list.items" ng-class="{'text-muted':item.myCondition}">
the DIV element doesnt support the disabled attribute.
or you can use css to make the div element support that attribute.
<div ng-repeat="item in list.items" ng-disabled="item.myCondition">
css
div[disabled]{
color:grey;
}
You are trying to use ng-disabled in DIV which in invalid. You can achieve this by applying css class conditionally like this.
<div class="box" ng-repeat="item in items" ng-class="{'disable-mode':item%2==0,'normal-mode':item%2!=0}">
</div>
Working Demo
I want to use Fotorama.io to show HTML content. But it appears that HTML is not clickable inside slider. Is there any possibility to make it work inside Fotorama?
Use .fotorama__select class on your frames to make it clickable and selectable:
<div class="fotorama">
<div class="fotorama__select">One</div>
<div class="fotorama__select"><strong>Two</strong></div>
<div class="fotorama__select"><em>Three</em></div>
</div>
http://fotorama.io/customize/html/#selectable-text
I am new to this. I have following html.
My ng-class value comes to active. so both these classes should be applied i.e. cardHeader and active.
But active class doesn't get applied.
<div class="cardHeader" ng-class="{{practice.status}}">{{practice.name}}</div>
Thanks for Help.
ng-class takes an object, not an angular expression
<div class="cardHeader" ng-class="{active: practice.status == 'active'}">{{practice.name}}</div>
or this should also work
<div class="cardHeader {{practice.status}}">{{practice.name}}</div>