Angular: ng-if

http://angularjs.org/

by peterbenoit

HTML

<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>    
       <div ng-if="showTo(message)">
          <div>To: {{message.to.name}}</div>
       </div>    
   </div>
</div>

JavaScript

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"},
   ...