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>
Related
I have an item in my array that is true or false.
I use this to say
<div ng-show="{{ item.isDirectory }}">
I also want to use the same rule to apply a class to that div if item.isDirectory == true
First, it's incorrect:
<div ng-show="{{ item.isDirectory }}">
ngShow waits an expression, it works just as below:
<div ng-show="item.isDirectory">
Also, preferably use ngIf directive as a good practice.
To apply a class in your div based on a condition, you should use ngClass directive:
<div ng-class="{ 'yourTrueclass': item.isDirectory, 'yourFalseClass': !item.isDirectory }"></div>
Take a look on this tutorial.
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.
I'm looking to change my background-image on buttons click.
I tried to use on my div: ng-init="select=1" ng-class="{'first-part': select == 1}" ng-class="{'sec-part': select == 2}"
and to check the varable to change the class but I can't using this variable out of the view.
My index code is like this :
<body ng-app="myApp">
<div ng-include="'views/header.html'"></div>
<div ng-view></div>
<div ng-include="'views/footer.html'"></div>
</body>
So my buttons are on the view and the css class to change on header.html.
Thanks guys for your help.
Nam's
Take a closer look at the documentation (and examples) of ngClass. You'll see:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
That means for you, you should try:
ng-class="{'first-part': select == 1, 'sec-part': select == 2}"
<div id="parent" ng-class="{testClass:???}">
<span id="child" class="test"/>
</div>
On this example, how would I do it so that if element child would have a class test, the parent element would dynamically have the class testClass?
You can create a scope variable to validate whether those 2 elements should be visible or not.
The inner span too should be getting set dynamically according to your description. So you can use ng-class for that too.
So the code can be like this :
<div id="parent" ng-class="{testClass : isValid}">
<span id="child" ng-class="{test : isValid}"/>
</div>
You can add the ternary condition within the ng-class like
var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">
and put in your css file the classes
.class-if-true{color=black}
.class-if-false{color=white}
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