make ng-switch-when more powerful

[lanterndev]

Programming languages with switch statements allow associating several cases with the same block, e.g.:

switch (value) {
case 0:
  foo();
  break;
case 1: // fall through
case 2: // fall through
case 3:
  bar();
  break;
}

It would be useful if ng-switch-when similarly allowed matching on multiple values, e.g.

<div ng-switch-on="value">
  <div ng-switch-when="foo">foo</div>
  <div ng-switch-when="/bar|baz/">bar or baz</div>
</div>

[jackofseattle]

The only thing I see being an issue with implementing this is that the convention for literal values everywhere else is to surround them in single quotes {{ 'thing' }} and interpolated values being unquoted {{ var }}

Also - /bar|baz/ is a valid result of the on expression so we'd need to choose something else..
maybe ng-switch-when=" 'bar'|'baz' " ?

Implementing the change is fairly trivial once the details are decided.

[gmoulin]

See http://stackoverflow.com/a/19146745/1620179 .
There is a override for ngSwitchWhen allowing x||y||z value.

[guillaume86]

To handle more complicated cases, another set of directives ng-match ng-match-when ng-match-default could be nice.
$value would be a local set to the ngMatch value when interpreting the ngMatchWhen clauses, like:

<div ng-match="myValue">
  <div ng-match-when="$value == 1 || $value == 2">1 OR 2</div>
  <div ng-match-default>Something else</div>
</div>

[samiconductor]

How about allowing the user to provide a delimiter and leave ngSwitchWhen as an attribute? Modified link definition of ngSwitchWhenDirective:

link: function(scope, element, attrs, ctrl, $transclude) {
  var delimiter = attrs.ngSwitchWhenMultiple;

  angular.forEach(attrs.ngSwitchWhen.split(delimiter), function(whenCase) {
    ctrl.cases['!' + whenCase] = (ctrl.cases['!' + whenCase] || []);
    ctrl.cases['!' + whenCase].push({ transclude: $transclude, element: element });
  });

};

It's not a regex but so far my use cases have been simple enough, match a handfull of values at most. And I like that you're not locked into a delimiter for all cases. Avoiding a duplicate snippet with multiple matches saves me from some heartburn.

Decorator to get it now as of version 1.3.8 (for the googles):

'use strict';

/**
 * @ngdoc function
 * @name yourApp.decorator:ngSwitchWhen
 * @description
 * # ngSwitchWhen
 *
 * Allow multiple matches for ngSwitchWhen with ngSwitchWhenMultiple delimiter.
 *
 * @see https://github.com/angular/angular.js/blob/v1.3.8/src/ng/directive/ngSwitch.js#L186
 */
angular.module('yourApp').config(function($provide) {
  $provide.decorator('ngSwitchWhenDirective', function($delegate) {

    angular.forEach($delegate, function(ngSwitchWhen) {

      // override default compile method since it has already closed over
      // the directive definition's link function
      ngSwitchWhen.compile = function() {

        return function(scope, element, attrs, ctrl, $transclude) {
          var delimiter = attrs.ngSwitchWhenMultiple;

          angular.forEach(attrs.ngSwitchWhen.split(delimiter), function(whenCase) {
            ctrl.cases['!' + whenCase] = (ctrl.cases['!' + whenCase] || []);
            ctrl.cases['!' + whenCase].push({ transclude: $transclude, element: element });
          });

        };

      };

    });

    return $delegate;
  });
});