angularjs: multiple values in a ng-switch-when
AngularjsNg SwitchAngularjs Problem Overview
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 ?
Angularjs Solutions
Solution 1 - Angularjs
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?
Solution 2 - Angularjs
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>
Solution 3 - Angularjs
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
.
Solution 4 - Angularjs
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>
Solution 5 - Angularjs
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
Solution 6 - Angularjs
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/
Solution 7 - Angularjs
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>