What is ng-if, ng-switch and ng-repeat directives ?

ng-if and ng-switch
 ng-if, ng-switch and ng-repeat 



AngularJS provides you ng-if, ng-switch directives to display HTML elements based on conditions or cases. ng-repeat directive is used to generate HTML from a collection of items.

ng-if

This directive can add / remove HTML elements from the DOM based on an expression. If the expression is true, it add HTML elements to DOM, otherwise HTML elements are removed from the DOM.

<div ng-controller="MyCtrl">
   <div ng-repeat="message in data.messages" ng-class="message.type">
       <hr>
       <div ng-if="showFrom(message)">
           <div>From: {{message.from.name}}</div>
       </div>  
       <div ng-if="showCreatedBy(message)">
          <div>Created by: {{message.createdBy.name}}</div>
       </div>

var myApp = angular.module('myApp', []);

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

function MyCtrl($scope) {
    $scope.data = {}
    $scope.showFrom = function(message) {
        return message.hasOwnProperty('from')
    }
    $scope.showCreatedBy= function(message) {
        return message.hasOwnProperty('createdBy')
    }
    $scope.showTo= function(message) {
        return message.hasOwnProperty('to')
    }
    $scope.data.messages = [
        {
        "type": "phone",
        "date": "25/12/2012",
        "time": "11.34",
        "createdBy": {
            "name": "Jenny Forster1",
            "avatarFileName": "jenny-forster.jpg"
        },
        "from": {
            "name": "Jenny Forster1",
            "avatarFileName": "jenny-forster.jpg"
        },
        "to": {
            "name": "Daniel Craig1",
            "avatarFileName": "daniel-craig.jpg"
        },
        "title": "This is the title of a phone call"},
    {
        "type": "email",
        "date": "25/12/2012",
        "time": "11.34",
        "createdBy": {
            "name": "Jenny Forster2",
            "avatarFileName": "jenny-forster.jpg"
        },
        "from": {
            "name": "Daniel Craig2",
            "avatarFileName": "daniel-craig.jpg"
        },
        "to": {
            "name": "Jenny Forster2",
            "avatarFileName": "jenny-forster.jpg"
        },
        "title": "This is the title of an email"},
    {
        "type": "meeting",
        "date": "25/12/2012",
        "time": "11.34",
        "createdBy": {
            "name": "Jenny Forster3",
            "avatarFileName": "jenny-forster.jpg"
        },
        "title": "This is the title of a meeting"},
    {
        "type": "note",
        "date": "25/12/2012",
        "time": "11.34",
        "createdBy": {
            "name": "Jenny Forster4",
            "avatarFileName": "jenny-forster.jpg"
        },
        "title": "This is the title of a note"}
    ]
}

This directive can add / remove HTML elements from the DOM conditionally based on scope expression.

<div ng-app ng-controller="ctrl" >
   <select ng-model="status" ng-options="status for status in statusList"></select>
    <p ng-switch on="(status == 'wrong') || (status == 'incorrect')">
    <span ng-switch-when="true">
        Wrong
    </span>
    <span ng-switch-default>


function ctrl($scope){
    $scope.statusList=["incorrect","wrong","stuff"];
 

}

ng-repeat

The ng-repeat directive used on an array of objects
This directive is used to iterate over a collection of items and generate HTML from it.
Example Code:

<div ng-controller="MyCtrl">
 <ul>
 <li ng-repeat="name in names">
 {{ name }}
 </li>
 </ul>
</div>

<script>
 var app = angular.module("app", []);
 app.controller("MyCtrl", function ($scope) {
 $scope.names = ['Shailendra', 'Deepak', 'Kamal'];
 });
</script>

Note:  ng-repeate is Json or API Data used is Looping Function.



What is ng-if, ng-switch and ng-repeat directives ? Developerinvention 5 of 5
 ng-if, ng-switch and ng-repeat  AngularJS provides you ng-if, ng-switch directives to display HTML elements based on conditions or ...

Share this

Related Posts

Previous
Next Post »

Xolo Offer