dropdown added

Author: 0xAX

README.md

@@ -9,6 +9,7 @@ Directives
   * [accordion](https://github.com/angularify/angular-semantic-ui/tree/master/src/accordion)
   * [checkbox](https://github.com/angularify/angular-semantic-ui/tree/master/src/checkbox)
   * [dimmer](https://github.com/angularify/angular-semantic-ui/tree/master/src/dimmer)
+  * [dropdown](https://github.com/angularify/angular-semantic-ui/tree/master/src/dropdown)
 
 Building
 ----------------------

src/dropdown/docs/controllers.js

@@ -1,8 +1,6 @@
 var dropdownApp = angular.module('dropdownApp', ['angularify.semantic.dropdown']);
 
 function RootCtrl ($scope) {
-	$scope.hello = function(){
-		alert('hello');
-	}
+    $scope.dropdown_model = 'item3';
 }
 

src/dropdown/dropdown.js

@@ -3,6 +3,30 @@
 angular.module('angularify.semantic.dropdown', [])
 
 .controller('DropDownController', ['$scope', function($scope){
+    $scope.items = [];
+
+    this.add_item = function(scope) {
+        $scope.items.push(scope);
+        
+        scope.$on('$destroy', function (event) {
+            this.remove_accordion(scope);
+        });
+        
+        return $scope.items;
+    }
+
+    this.remove_item = function(scope) {
+      var index = $scope.items.indexOf(scope);
+      if ( index !== -1 )
+        $scope.items.splice(index, 1);
+    }
+
+    this.update_title = function(title){
+        var i = 0;
+        for (i in $scope.items){
+            $scope.items[i].title = title;
+        }
+    }
 
 }])
 
@@ -14,24 +38,48 @@ angular.module('angularify.semantic.dropdown', [])
         controller: 'DropDownController',
         scope: {
             title : "@",
-            open : "@"
+            open : "@",
+            model : '=ngModel'
         },
         template: "<div class=\"{{dropdown_class}}\">" +
                     "<div class=\"default text\">{{title}}</div>" + 
                     "<i class=\"dropdown icon\"></i>" +
                     "<div class=\"menu\" ng-transclude>" +
                     "</div>" +
                   "</div>",
-        link: function(scope, element, attrs){
+        link: function(scope, element, attrs, DropDownController){
             scope.dropdown_class = 'ui selection dropdown';
-
+            
             if (scope.open == "true"){
                 scope.open = true;
                 scope.dropdown_class = scope.dropdown_class + ' active visible'; 
             }
             else
                 scope.open = false;
 
+            DropDownController.add_item(scope);
+            
+            //
+            // Watch for title changing
+            //
+            scope.$watch('title', function (val) {
+                if (val == undefined)
+                    return;
+
+                if (val == scope.title)
+                    return;
+                
+                scope.model = val;
+            });
+
+            //
+            // Watch for ng-model changing
+            //
+            scope.$watch('model', function (val) {
+                // update title
+                DropDownController.update_title(val)
+            });
+
             //
             // Click handler
             //
@@ -54,9 +102,17 @@ angular.module('angularify.semantic.dropdown', [])
         replace: true,
         transclude: true,
         require: '^dropdown',
-        template: '<div class="item" ng-transclude></div>',
-        link: function(scope, element, attrs){
-
+        scope : {
+        },
+        template: '<div class="item" ng-transclude>{{title}}</div>',
+        link: function(scope, element, attrs, DropDownController){
+            var title = element.children()[0].innerHTML;
+            //
+            // Menu item click handler
+            //
+            element.bind('click', function(){
+                DropDownController.update_title(title)
+            });
         }
     }
 });

src/dropdown/test/dropdown.spec.js

@@ -0,0 +1,46 @@
+describe('dropdown', function () {
+    var $scope;
+
+    beforeEach(module('angularify.semantic.dropdown'));
+
+    beforeEach(inject(function ($rootScope) {
+        $scope = $rootScope;
+    }));
+
+    describe('controller', function () {
+        var ctrl, $element, $attrs;
+        
+        beforeEach(inject(function($controller) {
+          $attrs = {}; $element = {};
+          ctrl = $controller('DropDownController', { $scope: $scope });
+        }));
+
+        describe('add_item', function() {
+            it("DropDownController add_item test", function(){
+                var acc1, acc2;
+                ctrl.add_item(acc1 = $scope.$new());
+                ctrl.add_item(acc2 = $scope.$new());
+                expect($scope.items.length).toBe(2);
+            });
+        });
+
+        describe('remove_item', function(){
+            it("DropDownController remove_item test", function(){
+                var acc1, acc2;
+                ctrl.add_item(acc1 = $scope.$new());
+                ctrl.add_item(acc2 = $scope.$new());
+                ctrl.remove_item(acc2);
+                expect($scope.items.length).toBe(1);
+            })
+        });
+
+        describe('update_title', function () {
+            it("DropDownController update_title test", function () {
+                var scope = $scope.$new();
+                ctrl.add_item(scope);
+                ctrl.update_title('title');
+                expect(scope.title).toBe('title');
+            })
+        });    
+    });
+});