feat(directive): ng:switch

src/ng/directive/ngSwitch.js

@@ -20,8 +20,11 @@
  * On child elments add:
  *
  * * `ngSwitchWhen`: the case statement to match against. If match then this
- *   case will be displayed.
- * * `ngSwitchDefault`: the default case when no other casses match.
+ *   case will be displayed. If the same match appears multiple times, all the
+ *   elements will be displayed.
+ * * `ngSwitchDefault`: the default case when no other case match. If there
+ *   are multiple default cases, all of them will be displayed when no other
+ *   case match.
  *
  * @example
     <doc:example>
@@ -68,22 +71,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) {
+      forEach(selectedScopes, function(selectedScope) {
         selectedScope.$destroy();
+      });
+      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);
+        forEach(selectedTranscludes, function(selectedTransclude) {
+          var selectedScope = scope.$new();
+          selectedScopes.push(selectedScope);
+          selectedTransclude(selectedScope, function(caseElement) {
+            selectedElements.push(caseElement);
+            element.append(caseElement);
+          });
         });
       }
     });
@@ -96,7 +105,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 +117,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);
     };
   }
 });

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(
+      '<ul ng-switch="select">' +
+        '<li ng-switch-when="1">first:{{name}}</li>' +
+        '<li ng-switch-when="1">, first too:{{name}}</li>' +
+        '<li ng-switch-when="2">second:{{name}}</li>' +
+        '<li ng-switch-when="true">true:{{name}}</li>' +
+      '</ul>')($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(
+      '<ul ng-switch="select">' +
+        '<li ng-switch-when="1">one</li>' +
+        '<li ng-switch-default>other</li>' +
+        '<li ng-switch-default>, other too</li>' +
+      '</ul>')($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(