diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js index 1ddf90fbe2cd..f7abd3e14924 100644 --- a/src/ng/directive/ngSwitch.js +++ b/src/ng/directive/ngSwitch.js @@ -37,7 +37,9 @@ * * * `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. You can also use an array, which allows + * specifying multiple values for the same element. Values will be evaluated + * within the scope when using the array notation. * * `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. @@ -54,7 +56,8 @@
Settings Div
-
Home Span
+
Home Div
+
Settings & Home
default
@@ -163,14 +166,31 @@ var ngSwitchDirective = ['$animate', function($animate) { } }]; +var SIMPLEARRAY_TEST = /^\s*?\[(.*)\]\s*?$/; + var ngSwitchWhenDirective = ngDirective({ transclude: 'element', priority: 500, require: '^ngSwitch', compile: function(element, attrs, transclude) { return function(scope, element, attr, ctrl) { - ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []); - ctrl.cases['!' + attrs.ngSwitchWhen].push({ transclude: transclude, element: element }); + var a = attrs.ngSwitchWhen, + prev = [], + addValue = function(when) { + // avoid multiple matches for the same element + if (!prev[when]) { + ctrl.cases['!' + when] = (ctrl.cases['!' + when] || []); + ctrl.cases['!' + when].push({ transclude: transclude, element: element }); + prev[when] = true; + } + } + if (SIMPLEARRAY_TEST.test(a)) { + var whenValue = scope.$eval(a); + forEach(whenValue, addValue); + } + else { + addValue(a); + } }; } }); diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js index e4cd483c136c..5fafcbb30eb3 100644 --- a/test/ng/directive/ngSwitchSpec.js +++ b/test/ng/directive/ngSwitchSpec.js @@ -66,6 +66,38 @@ describe('ngSwitch', function() { })); + it('should allow multiple switch-whens when using array notation', inject(function($rootScope, $compile) { + element = $compile( + '')($rootScope); + $rootScope.select = 1; + $rootScope.name="pete"; + $rootScope.$apply(); + expect(element.text()).toEqual('first:pete both:pete'); + $rootScope.select = 2; + $rootScope.$apply(); + expect(element.text()).toEqual(' both:pete second:pete'); + })); + + + it('should switch only once even if multiple whens matches the same element when using array notation', inject(function($rootScope, $compile) { + element = $compile( + '')($rootScope); + $rootScope.name="pete"; + $rootScope.select = 2; + $rootScope.$apply(); + expect(element.text()).toEqual(' both:pete second:pete'); + })); + it('should switch on switch-when-default', inject(function($rootScope, $compile) { element = $compile( '' +