Custom Directive

http://angularjs.org/

by Edward Tanguay

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/ng-template" id="itemMenuTemplate">
    <div ng-repeat="item in vm.items track by $index">
        <div ng-switch="item.kind">
            
            <!-- INTERNAL -->
            <div ng-switch-when="internal">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <b>{{item.firstName}} {{item.lastName}}</b> (INTERNAL)
                    </div>
                    <div class="panel-body">
                        <div>Age: {{item.age}}</div>
                        <div>Internal Code: {{item.internalcode}}</div>
                    </div>
                </div>
            </div>
            
            <!-- EXTERNAL -->
            <div ng-switch-when="external">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <b>{{item.firstName}} {{item.lastName}}</b> (EXTERNAL)
                    </div>
                    <div class="panel-body">
                        <div>Age: {{item.age}}</div>
                        <div>Website: {{item.website}}</div>
                    </div>
                </div>
            </div>
            
            <!-- UNDEFINED -->
            <div ng-switch-when="undefined">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <b>{{item.firstName}} {{item.lastName}}</b> (undefined) <button ng-click="switchKind(item, 'internal')">Switch to INTERNAL</button> <button ng-click="switchKind(item, 'external')">Switch to EXTERNAL</button>
                    </div>
                    <div class="panel-body">
                        <div>Age: {{item.age}}</div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</script>

<div ng-controller="mainController">
   ...

CSS

body {
    padding: 20px;   
}

JavaScript

'use strict';
angular.module('myApp',[])
.controller('mainController', function ($scope) {
    $scope.customers = [
        {'kind':'internal', 'firstName':'Jim', 'lastName':'Thompson', 'age':'34', 'internalcode':'X3434'},
        {'kind':'external', 'firstName':'James', 'lastName':'Hankerton', 'age':'33','website':'http://google.com'},
        {'kind':'undefined', 'firstName':'Greg', 'lastName':'Garland', 'age':'28'},
        {'kind':'undefined', 'firstName':'Hank', 'lastName':'Hood', 'age':'28'}
    ];
    $scope.numberAdded = 0;
    $scope.addCustomer = function() {
        $scope.numberAdded++;
        $scope.customers.push({
            'firstName':'Joe', 
            'lastName':'Newton', 
            'age':Math.floor(Math.random() * 60) + 20 });
    }
})
.directive('itemMenu',function() {
    
    var controller = function($scope) {
		var vm = this;
        function init() {
        	vm.items =$scope.datasource;
        }
        init();
    };
    
    return {
      restrict: 'A',
        scope: {
        	datasource: '=',
            add: '&'
        },
        controller: controller,
        controllerAs: 'vm',
        bindToController: true,
        templateUrl: 'itemMenuTemplate',
        link: function(scope, element, attrs) {
            scope.switchKind = function(item, newKind) {
                item.kind = newKind;
            };
    	}
    };
	
});