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() {