AngularJS Directives (Part II)

Now its all about directives talk, this is the second part of my previous post. Those who wish to know more about AngularJS Directive's can be benefited by reading this content. You must be familiar with conditional statements and loops. AJS also have these features as directives, listed as:

• ng-if
• ng-switch
• ng-repeat

ng-if can be used to add/remove contents from DOM, for example:

<div ng-controller="HelloController" >
    <div ng-if="true">ng-if Show</div>
    <div ng-if="false">ng-if Hide</div>
</div>


ng-switch unlike the ng-if can be used to add/remove elements from HTML DOM, for example:

<div ng-controller="HelloController" >
    <div ng-switch on="2">
       <div ng-switch-when="1">Switch 1</div>
       <div ng-switch-when="2">Switch 2</div>
       <div ng-switch-when="3">Switch 3</div>
    </div>
</div>


In the example output will be displayed as 'Switch 2'.

ng-repeat directive act as a loop to execute a certain snippet number of times assigned. It generates html by iterating over the conditions. Example:
<ol>
  <li ng-repeat="5">Hello World</li>
</ol>

The above snippet prints the 'Hello Word' 5 times creating the <li> tags.

For more reference you can search about more directives ng-include, ng-show, ng-hide. For more complex examples please let me know. In the next article we will the covering AJS 'Filters'.
Many thanks