how to apply conditional attribute to a div - angularjs

I have a div like this:
<div ng-switch-when="checkbox">
I would like to add a conditional style attribute to it when the length of an array in my scope is > 5
I tried this but it isn't working
<div ng-switch-when="checkbox" ng-attr-class="{{myArray.length > 5 && 'style='height:250px; overflow:scroll;''}}">


define a class in your CSS file, say .overflow.
Then do this:
<div ng-class="{'overflow' : myArray.length > 5}"></div>


You should create some class first with these style:
.extraStyle{
height:250px;
overflow:scroll;
}
then apply ng-class in div:
<div ng-switch-when="checkbox"
ng-class="{extraStyle:myArray.length > 5}">
Notice: You should use data- with all directives if you want your code to be proper for HTML5 standars. For Example:
data-ng-class


you can define your style in your css file, for example:
.mystyle{
height:250px;
overflow:scroll;
}
then you can add this class to your div as an ng-class
<div ng-class="{mystyle: mycondition}"></div>

Related

How to add ng-click or ng-dblclick conditionally in angularjs?

I have below sample html markup
<div ng-style="{'height' : myHeight +'px'}" ng-dblclick="myCtrl.clickme()"></div>
How I can add conditionally in DOM ng-click or ng-dblclick attributes in markup??

There is no way to do it in the same markup, however you can have two markups and apply condition as,
<div ng-style="{'height' : myHeight +'px'}" ng-if="contitionforDblClick()" ng-dblclick="myCtrl.clickme()"></div>
<div ng-style="{'height' : myHeight +'px'}" ng-if="contitionforClick()" ng-click="myCtrl.clickme()"></div>

How to use AngularJS ng-Class condition based on another element's class?

<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}

Angular apply dynamic class to DOM element when one already exists

I have an element:
<div class="wrapper" > ... </div>
I know I can use angular to apply a class conditionally:
<div ng-class="{'wrapper-big': style.big}" > ... </div>
But I want to keep a static class and add 'big' using angular.
Desired output:
<div class="wrapper big" > ... </div>
So the class big is what I want to conditionally add.

you can use the class and ng-class attributes together.
<div class="wrapper" ng-class="{'big': /*CONDITION*/}" > ... </div>

use the array syntax of ng-class.
e.g.
<div ng-class="[style1, style2, style3]" > ... </div>
Here is an example - https://docs.angularjs.org/api/ng/directive/ngClass

Angular js complex class

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>

Is there a way to have directives like ng-switch replace the div that contains the ng-switch with the correct outcome?

For example, is there a way for:
<div ng-switch on="value">
<div ng-switch-when="1"> 1 </div>
<div ng-switch-when="2"> 2 </div>
</div>
to "return" the final form as simply (pretending that value = 1)
<div ng-switch-when="1"> 1 </div>
without the encompassing div?
Or is there another directive that can do this?
It would save me a lot of modifying CSS...

I recommend using ng-if:
<div ng-if="value==1"> 1 </div>
<div ng-if="value==2"> 2 </div>
Example: http://plnkr.co/edit/h8uap4NMJ9uGsFDy8Ck7?p=preview

Yes you can use ngIf Directive to add element into DOM conditionally.
ngIf
<div ng-if="myVar == '1'">Hello world</div>
This DIV will render only if value of myVar is 1.
Note : ngIf will create new scope. It won't work with ng-repeat.
For ng-repeat, you can use ngShow or ngHide directive. It works same as ngIf but it just add display:none by css class named as hide. So its better to use ngIf. ngShow or ngHide is expensive.
ngShow
<div ng-show="myVar == '1'">Hello world</div>
ngHide
<div ng-hide="myVar == '1'">Hello world</div>
By using this, you will not see Hello world but it will be in DOM

Resources