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(
+ '' +
+ '- first:{{name}}
' +
+ '- both:{{name}}
' +
+ '- second:{{name}}
' +
+ '- true:{{name}}
' +
+ '
')($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(
+ '' +
+ '- first:{{name}}
' +
+ '- both:{{name}}
' +
+ '- second:{{name}}
' +
+ '- true:{{name}}
' +
+ '
')($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(
'' +