feat(ngSwitch): allow multiple case matches via optional attribute ngSwitchWhenSeparator

Adds an optional attribute `ngSwitchWhenSeparator` that allows multiple tokens to match a given `ngSwitchWhen`.

Closes #3410
Closes #3516

Closes #10798

Author: lgalfaso

src/ng/directive/ngSwitch.js

@@ -50,7 +50,11 @@
  *
  * * `ngSwitchWhen`: the case statement to match against. If match then this
  *   case will be displayed. If the same match appears multiple times, all the
- *   elements will be displayed.
+ *   elements will be displayed. It is possible to associate mutiple values to
+ *   the same `ngSwitchWhen` by defining the optional attribute
+ *   `ngSwitchWhenSeparator`. The separator will be used to split the value of
+ *   the `ngSwitchWhen` attribute into multiple tokens, and the element will show
+ *   if any of the `ngSwitch` evaluates to any of these tokens.
  * * `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.
@@ -189,8 +193,16 @@ var ngSwitchWhenDirective = ngDirective({
   require: '^ngSwitch',
   multiElement: true,
   link: function(scope, element, attrs, ctrl, $transclude) {
-    ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []);
-    ctrl.cases['!' + attrs.ngSwitchWhen].push({ transclude: $transclude, element: element });
+
+    var cases = attrs.ngSwitchWhen.split(attrs.ngSwitchWhenSeparator).sort().filter(
+      // Filter duplicate cases
+      function(element, index, array) { return array[index - 1] !== element; }
+    );
+
+    forEach(cases, function(whenCase) {
+      ctrl.cases['!' + whenCase] = (ctrl.cases['!' + whenCase] || []);
+      ctrl.cases['!' + whenCase].push({ transclude: $transclude, element: element });
+    });
   }
 });
 

test/ng/directive/ngSwitchSpec.js

@@ -299,6 +299,113 @@ describe('ngSwitch', function() {
     $rootScope.$apply('mode = "b"');
     expect(element.children().length).toBe(1);
   }));
+
+
+  describe('ngSwitchWhen separator', function() {
+    it('should be possible to define a separator', inject(function($rootScope, $compile) {
+      element = $compile(
+        '<div ng-switch="mode">' +
+          '<p ng-switch-when="a|b" ng-switch-when-separator="|">Block1|</p>' +
+          '<p ng-switch-when="a">Block2|</p>' +
+          '<p ng-switch-default>Block3|</div>' +
+        '</div>'
+      )($rootScope);
+
+      $rootScope.$apply('mode = "a"');
+      expect(element.children().length).toBe(2);
+      expect(element.text()).toBe('Block1|Block2|');
+      $rootScope.$apply('mode = "b"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block1|');
+      $rootScope.$apply('mode = "c"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block3|');
+    }));
+
+
+    it('should be possible to use a separator at the end of the value', inject(function($rootScope, $compile) {
+      element = $compile(
+        '<div ng-switch="mode">' +
+          '<p ng-switch-when="a|b|" ng-switch-when-separator="|">Block1|</p>' +
+          '<p ng-switch-when="a">Block2|</p>' +
+          '<p ng-switch-default>Block3|</div>' +
+        '</div>'
+      )($rootScope);
+
+      $rootScope.$apply('mode = "a"');
+      expect(element.children().length).toBe(2);
+      expect(element.text()).toBe('Block1|Block2|');
+      $rootScope.$apply('mode = ""');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block1|');
+      $rootScope.$apply('mode = "c"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block3|');
+    }));
+
+
+    it('should be possible to use the empty string as a separator', inject(function($rootScope, $compile) {
+      element = $compile(
+        '<div ng-switch="mode">' +
+          '<p ng-switch-when="ab" ng-switch-when-separator="">Block1|</p>' +
+          '<p ng-switch-when="a">Block2|</p>' +
+          '<p ng-switch-default>Block3|</div>' +
+        '</div>'
+      )($rootScope);
+
+      $rootScope.$apply('mode = "a"');
+      expect(element.children().length).toBe(2);
+      expect(element.text()).toBe('Block1|Block2|');
+      $rootScope.$apply('mode = "b"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block1|');
+      $rootScope.$apply('mode = "c"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block3|');
+    }));
+
+
+    it('should be possible to use separators that are multiple characters long', inject(function($rootScope, $compile) {
+      element = $compile(
+        '<div ng-switch="mode">' +
+          '<p ng-switch-when="a||b|a" ng-switch-when-separator="||">Block1|</p>' +
+          '<p ng-switch-when="a">Block2|</p>' +
+          '<p ng-switch-default>Block3|</div>' +
+        '</div>'
+      )($rootScope);
+
+      $rootScope.$apply('mode = "a"');
+      expect(element.children().length).toBe(2);
+      expect(element.text()).toBe('Block1|Block2|');
+      $rootScope.$apply('mode = "b|a"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block1|');
+      $rootScope.$apply('mode = "c"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block3|');
+    }));
+
+
+    it('should ignore multiple appearances of the same item', inject(function($rootScope, $compile) {
+      element = $compile(
+        '<div ng-switch="mode">' +
+          '<p ng-switch-when="a|b|a" ng-switch-when-separator="|">Block1|</p>' +
+          '<p ng-switch-when="a">Block2|</p>' +
+          '<p ng-switch-default>Block3|</div>' +
+        '</div>'
+      )($rootScope);
+
+      $rootScope.$apply('mode = "a"');
+      expect(element.children().length).toBe(2);
+      expect(element.text()).toBe('Block1|Block2|');
+      $rootScope.$apply('mode = "b"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block1|');
+      $rootScope.$apply('mode = "c"');
+      expect(element.children().length).toBe(1);
+      expect(element.text()).toBe('Block3|');
+    }));
+  });
 });
 
 describe('ngSwitch animation', function() {