diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js
index 4c11f62f0421..5cd010d9c8c6 100644
--- a/src/ng/directive/ngSwitch.js
+++ b/src/ng/directive/ngSwitch.js
@@ -48,7 +48,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,13 @@ 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(
+ function(el, ix, ar) { return ar[ix - 1] !== el;}
+ );
+ forEach(cases, function(whenCase) {
+ ctrl.cases['!' + whenCase] = (ctrl.cases['!' + whenCase] || []);
+ ctrl.cases['!' + whenCase].push({ transclude: $transclude, element: element });
+ });
}
});
diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js
index 5ad610c1b2f6..b9b28c5345a0 100644
--- a/test/ng/directive/ngSwitchSpec.js
+++ b/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(
+ '
' +
+ '
Block1|
' +
+ '
Block2|
' +
+ '
Block3|
' +
+ ''
+ )($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(
+ '' +
+ '
Block1|
' +
+ '
Block2|
' +
+ '
Block3|
' +
+ ''
+ )($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(
+ '' +
+ '
Block1|
' +
+ '
Block2|
' +
+ '
Block3|
' +
+ ''
+ )($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(
+ '' +
+ '
Block1|
' +
+ '
Block2|
' +
+ '
Block3|
' +
+ ''
+ )($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(
+ '' +
+ '
Block1|
' +
+ '
Block2|
' +
+ '
Block3|
' +
+ ''
+ )($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() {