Group Drop-down directive

Build a DSL tag for switching groups in an application.

by krimple

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<div ng-app='demo' ng-controller='MyCtrl'>
    <p>You've just selected {{group}}.</p>
    <user-group-switcher />
</div>

CSS

form.userGroup {
    width: 300px;
    height: auto;
    border: 2px solid black;
    background-color: lightyellow;    
}
form.userGroup label {
    margin-left: 10px;
    color: blue;
}

JavaScript

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

demo.directive('userGroupSwitcher', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: false,
        template: '<form class="userGroup"><label for="userGroupSelect">Select a Group</label><select ng-model="currentGroup" ng-options="o.value as o.label for o in myGroups" /><input type="button" ng-click="applyNewGroup(currentGroup)" value="Switch Group"/></form>'
    };
});
               
function MyCtrl ($scope, $rootScope) {
    $rootScope.myGroups = [
        {label:'Admin', value:1},
        {label:'Users', value:2},
        {label:'Public', value:3}
    ];
    
    $scope.$on("new group", function(obj, value) {
        console.log("Global group switched to " + JSON.stringify(value));
    });
    
    $scope.applyNewGroup = function (currentGroup) {
        $rootScope.$broadcast("new group", currentGroup);
    };
        
}