61

I have the following ngSwitch:

<p ng-switch="status">
    <span ng-switch-when="wrong|incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

As you can see, I have the text Wrong for two options wrong and correct. I have tried (as you can see) to use the pipe |, but that doesn't work. Any suggestions ?

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

7 Answers7

75

For angular >=v1.5.10,

You can do it by adding ng-switch-when-separator="|" to ng-switch-when node. see example in documentation.

<span ng-switch-when="wrong|incorrect" ng-switch-when-separator="|">

see discussion here https://github.com/angular/angular.js/issues/3410 Note, based on my experience it doesn't work with numbers...yet?

Tim M.
  • 53,671
  • 14
  • 120
  • 163
Chauskin Rodion
  • 1,204
  • 1
  • 11
  • 13
  • 7
    Despite the documentation reading otherwise, this functionality isn't yet in v1.5.8, but will get into 1.5.9 onwards (see: https://github.com/flyfly6/angular.js/pull/1). – steevee Sep 22 '16 at 14:31
43

This is almost same with using a ng-if, but the advantage of this is that you can use ng-switch-when="true" or default or false multiple times within main ng-switch.

<p ng-switch on="(status == 'wrong') || (status == 'incorrect')">
    <span ng-switch-when="true">
        Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Live : http://jsfiddle.net/8yf15t2d/

  • Your answer should contain an explanation of your code and a description how it solves the problem. – AbcAeffchen Dec 21 '14 at 17:47
  • 11
    What is the advantage over "ng-if" ? – Stalinko Jun 29 '15 at 15:10
  • 1
    If there are many switch cases then there is a performance benefit, as ng-if sets up a watcher for each ng-if, while ng-switch only sets up one watcher. This is most relevant if you're inside a ng-repeat, as then all these watchers would add up. – Sámal Rasmussen Nov 02 '18 at 09:10
20

You can't have multiple conditions with a single ng-switch-when.

One alternative is to use an ng-if, but in the case of error handling, I prefer to populate an error variable on the scope in the controller, and use ng-show=error.

Ed_
  • 18,798
  • 8
  • 45
  • 71
16

You can add a filter to the status that maps values that mean the same thing into the same value.

.filter('meaning', function() {
    return function(input) {
      input = input || '';
      if (['wrong', 'amiss','awry', 'bad', 'erroneous', 'false', 'inaccurate',\
           'misguided', 'mistaken', 'unsound', 'incorrect'].indexOf(input) != -1)
          return 'wrong';
      // You can make it generic like this:
      synonymsDictionary = {
        'someWord' : ['syn1', 'syn2', 'syn3' ... ],
        'someOtherWord' : ['otherWordSyn1', 'otherWordSyn2', 'otherWordSyn3' ...]
        .
        .
        .
      };

      for (var word in synonymsDictionary)
          if (synonymsDictionary[word].indexOf(input) != -1)
              return word; // This way you could iterate over a bunch of arrays...

         // Edge case
         else return input;
    };
  })

Then you simply

<p ng-switch="status|meaning">
    <span ng-switch-when="wrong">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Although in your case, you may have just wanted to print a message so you could have pulled the message from a dictionary...

Something like:

<span ng-if="status">
    {{getStatusMessage(status)}}
</span>
AturSams
  • 7,568
  • 18
  • 64
  • 98
5

This cannot be achieved with angular's base directives, but if you like, you could write your own directive to implement this, and could already interface with the existing ngSwitch directive.

ngSwitchController has one property cases which is a map. Every case key is prefixed with an ! and the default case is equal to ?. Each case value is an object with two properties: transclude and element.
Warning: Unlike ngModelController, ngSwitchController is not published API, so it's subject to change.

Based off of the original ngSwitchWhenDirective, we can construct a multiswitchWhen, that will work with all existing ngSwitch, ngSwitchWhen, and ngSwitchDefault directives without conflict.

.directive('multiswitchWhen', function () {
    return {
        transclude: 'element',
        priority: 800,
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var selectTransclude = { transclude: $transclude, element: element };
            angular.forEach(attrs.multiswitchWhen.split('|'), function(switchWhen) {
                ctrl.cases['!' + switchWhen] = (ctrl.cases['!' + switchWhen] || []);
                ctrl.cases['!' + switchWhen].push(selectTransclude);
            });
        }
    }
});

Example plunker: http://plnkr.co/edit/K9znnnFiVnKAgGccSlrQ?p=preview

jgawrych
  • 3,322
  • 1
  • 28
  • 38
3

You can add another switch case.

Example:

<p ng-switch="status">
    <span ng-switch-when="wrong">
       Wrong
    </span>
<span ng-switch-when="incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Live example: http://jsfiddle.net/choroshin/Zt2qE/2/

Alex Choroshin
  • 6,177
  • 2
  • 28
  • 36
0

ng-switch with option selection may help

<select ng-model="myVar">
  <option value="option1">Option 1
  <option value="option2">Option 2
  <option value="option3">Option 3
</select>
<div ng-switch="myVar">
  <div ng-switch-when="option1">
     <p>Option 1 is selected .</p>
  </div>
  <div ng-switch-when="option1">
     <p>Option 2 is selected</p>
  </div>
  <div ng-switch-default>
     <p>Option 3 is selected </p>
  </div>
</div>