Conditional display of elements/data using Angular Js Directives.

Today we would learn frequently used Angular JS directives.

 

Problem:- How to achieve conditional construct in Angular js?

Love Nature

 

Solution:- We would achieve it by using built in directives of Angular JS.

1. ng-Switch:-We can control the conditional display of data.
It is similar to Switch-Case in JavaScript.

JavaScript syntax:-
Switch(expression) {

   Case  n:
     Code 
     Break;
   Case n1:
     Code 
     Break;
   Default:
     Default code

 

Angular JS syntax:-
Lets have corresponding code for above flow using directives:-
ng-switch on = expression 

   ng-switch-when = n
    Code
   ng-switch-when = n
    Code
   ng-switch-default
    Code


We also need to use ng-switch-when & ng-switch-default directives same as Case and Default in Javascript


Example:-

<div ng-app>
     EnterColor:
     <input type = "text" ng-model="Color"/>
    <div ng-switch on = "Color">
        <span ng-switch-when="red" style="color:{{Color}}"> I am very RED
       </span>
        <span ng-switch-when="green" style="color:{{Color}}"> I am very GREEN            
        </span>
        <span ng-switch-default  style="color:{{Color}}"> I am default            
        </span>
    </div>

</div>

 

Working Code

2. ng-If:- Used to remove/recreate the DOM element based on the expression.


Syntax:- ng-if=”Conditional-Expression“

Note:-when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored.
 

Example:-

<div ng-app>
     Check for Red Color:
     <input type = "checkbox" ng-model="Color"/>
    <div ng-if = "Color" style="width:50px;height:50px;background-color:red;">
    </div>
    <div ng-if = "!Color" style="width:50px;height:50px;background-color:green;">
    </div>

</div>

 


ng-if example code



Working Code

3. ng-Show/ng-Hide:-
Used to show/hide the DOM element based on the expression.

Note: – Unlike ng-if, it is not deleting and recreating the element from DOM but simply changing the display CSS of the element.

Syntax:-ng-Hide=”expression“

How it works: – 

  • All it uses is Class =”ng-hide” and this class have CSS property of “display:none !important”.
  • !important so that this property have the maximum weight and cannot be overridden.
  • When expression is true then .ng-hide CSS is added causing element to be hidden and vice-verse.
Note: – For ng-Show we have ng-hide class added on “False” condition and removed when condition is “true” (it is reverse case as of  ng-Hide)

Example:-
<div ng-app>
     Show Me:
     <input type = "checkbox" ng-model="Color"/>
    <div ng-show = "Color" style="width:50px;height:50px;background-color:red;">
    </div>
    Hide Me:
    <input type = "checkbox" ng-model="hideColor"/>
    <div ng-hide = "hideColor" style="width:50px;height:50px;background-color:green;">
    </div>

</div>

 

ng-show Example

 

 
  • We can check the ng-hide class, using the inspect element.

At launch of code 

ng-hide class is applied


Check the “Show Me” checkbox

 
ng-hide class is removed

 

ufthelp

Leave a Reply

Your email address will not be published. Required fields are marked *