feat(directive): ng:switch

Added the ability to handle multiple matches on ng:switch-when and ng:switch-default Closes angular#1074
lgalfaso · Feb 6, 2013 · 7df8959 · IgorMinar · Feb 7, 2013 · IgorMinar
1 parent 7cc4063
commit 7df8959
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js
@@ -68,22 +68,28 @@ var ngSwitchDirective = valueFn({
   },
   link: function(scope, element, attr, ctrl) {
     var watchExpr = attr.ngSwitch || attr.on,
-        selectedTransclude,
-        selectedElement,
-        selectedScope;
+        selectedTranscludes,
+        selectedElements,
+        selectedScopes;
 
     scope.$watch(watchExpr, function ngSwitchWatchAction(value) {
-      if (selectedElement) {
+      angular.forEach(selectedScopes, function(selectedScope) {
         selectedScope.$destroy();
+      });
+      angular.forEach(selectedElements, function(selectedElement) {
         selectedElement.remove();
-        selectedElement = selectedScope = null;
-      }
-      if ((selectedTransclude = ctrl.cases['!' + value] || ctrl.cases['?'])) {
+      });
+      selectedElements = [];
+      selectedScopes = [];
+      if ((selectedTranscludes = ctrl.cases['!' + value] || ctrl.cases['?'])) {
         scope.$eval(attr.change);
-        selectedScope = scope.$new();
-        selectedTransclude(selectedScope, function(caseElement) {
-          selectedElement = caseElement;
-          element.append(caseElement);
+        angular.forEach(selectedTranscludes, function(selectedTransclude) {
+          var selectedScope = scope.$new();
+          selectedScopes.push(selectedScope);
+          selectedTransclude(selectedScope, function(caseElement) {
+            selectedElements.push(caseElement);
+            element.append(caseElement);
+          });
         });
       }
     });
@@ -96,7 +102,8 @@ var ngSwitchWhenDirective = ngDirective({
   require: '^ngSwitch',
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
-      ctrl.cases['!' + attrs.ngSwitchWhen] = transclude;
+      ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []);
+      ctrl.cases['!' + attrs.ngSwitchWhen].push(transclude);
     };
   }
 });
@@ -107,7 +114,8 @@ var ngSwitchDefaultDirective = ngDirective({
   require: '^ngSwitch',
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
-      ctrl.cases['?'] = transclude;
+      ctrl.cases['?'] = (ctrl.cases['?'] || []);
+      ctrl.cases['?'].push(transclude);
     };
   }
 });
diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js
@@ -35,6 +35,32 @@ describe('ngSwitch', function() {
     expect(element.text()).toEqual('true:misko');
   }));
 
+  it('should switch show all the options that match the switch-when', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<div ng-switch="select">' +
+        '<div ng-switch-when="1">first:{{name}}</div>' +
+        '<div ng-switch-when="1">, first too:{{name}}</div>' +
+        '<div ng-switch-when="2">second:{{name}}</div>' +
+        '<div ng-switch-when="true">true:{{name}}</div>' +
+      '</div>')($rootScope);
+    expect(element.html()).toEqual(
+        '<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('first:, first too:');
+    $rootScope.name="shyam";
+    $rootScope.$apply();
+    expect(element.text()).toEqual('first:shyam, first too:shyam');
+    $rootScope.select = 2;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('second:shyam');
+    $rootScope.name = 'misko';
+    $rootScope.$apply();
+    expect(element.text()).toEqual('second:misko');
+    $rootScope.select = true;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('true:misko');
+  }));
 
   it('should switch on switch-when-default', inject(function($rootScope, $compile) {
     element = $compile(
@@ -49,6 +75,20 @@ describe('ngSwitch', function() {
     expect(element.text()).toEqual('one');
   }));
 
+  it('should show all switch-when-default', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ng:switch on="select">' +
+        '<div ng:switch-when="1">one</div>' +
+        '<div ng:switch-default>other</div>' +
+        '<div ng:switch-default>, other too</div>' +
+      '</ng:switch>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('other, other too');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('one');
+  }));
+
 
   it('should call change on switch', inject(function($rootScope, $compile) {
     element = $compile(