angularjs: multiple values in a ng-switch-when

Question

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 ?

Answer 1

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?

Answer 2

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/

Answer 3

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.

Answer 4

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>

Answer 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

Answer 6

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/

Answer 7

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>